:focus {outline:none;}
::-moz-focus-inner {border:0;}
@font-face { 
    font-family         : Oswald;
    src                 : url('./fonts/Oswald.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : OswaldLight;
    src                 : url('./fonts/Oswald/static/Oswald-Light.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : OswaldExtraLight;
    src                 : url('./fonts/Oswald/static/Oswald-ExtraLight.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : OswaldBold;
    src                 : url('./fonts/Oswald/static/Oswald-Bold.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : LeagueGothic;
    src                 : url('./fonts/LeagueGothic-Regular.otf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : HandelGothic;
    src                 : url('./fonts/HandelGothic.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Impact;
    src                 : url('./fonts/impact.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Poppins;
    src                 : url('./fonts/Poppins-Black.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Anton;
    src                 : url('./fonts/Anton.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Poppins-R;
    src                 : url('./fonts/Poppins-Regular.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Accidental;
    src                 : url('./fonts/accidental-presidency.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : AbrilFatface;
    src                 : url('./fonts/AbrilFatface-Regular.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Limelight;
    src                 : url('./fonts/Limelight-Regular.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : PoiretOne;
    src                 : url('./fonts/PoiretOne-Regular.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : CaviarDreams;
    src                 : url('./fonts/CaviarDreams.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Ethno;
    src                 : url('./fonts/ethnocentric.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Penna;
    src                 : url('./fonts/Penna.otf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Quicksand;
    src                 : url('./fonts/Quicksand.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Josefin;
    src                 : url('./fonts/JosefinSans.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : JosefinLight;
    src                 : url('./fonts/JosefinSans-Light.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : JosefinExtraLight;
    src                 : url('./fonts/JosefinSans-ExtraLight.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : JosefinThin;
    src                 : url('./fonts/JosefinSans-Thin.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Fled;
    src                 : url('./fonts/fledgling-sb.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Avant;
    src                 : url('./fonts/AvantGarde.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Worksans;
    src                 : url('./fonts/WorkSans-VariableFont_wght.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : Kalam;
    src                 : url('./fonts/KalamRegular.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
@font-face { 
    font-family         : KalamLight;
    src                 : url('./fonts/KalamLight.ttf');
    font-display        : swap; /* use system font while loading font file  */
}
* {
    box-sizing: border-box;
}
html,body{
    height              : 100%;
    background          : #FFFFFF;
    margin              : 0px;
    padding             : 0px;
    font-size           : 13px;
    margin-top          : 0px;
    font-family         : 'Arial',sans-serif;
    font-size           : 13px;
    float               : none;
    overflow            : auto;
    
}
body{
    padding             : 0vmin;
    
}
body *{
    font-family         : 'Arial',sans-serif;
    font-size           : 13px;
    color               : #666666;
    -webkit-box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    box-sizing          : border-box;
}
::-webkit-input-placeholder { /* Edge */
    color: #888888;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #888888;
}

::placeholder {
    color: #888888;
    font-size: calc(12px + 0.1vw);
}
.PAGE-WIDTH{
    max-width               : 1400px !important;
}

.DISPLAY-NONE {
    display                 : none !important;
}
.noscroll,.FACES-NOSCROLL{
	overflow: hidden;
}
*:not(a){
    color: #666666;
}

.YMODAL_DIALOG{
    color: #000;
}

.YMODAL_DIALOG *{
    color: #000;
}
.Y_MODAL_DIALOG{
    background: rgba(0, 0, 0, .4);
    top: 49%;
    left: 49%;
    -moz-box-shadow:     0px 0px 40px 10px rgba( 0, 0, 0, .4);
    -webkit-box-shadow:  0px 0px 40px 10px rgba( 0, 0, 0, .4);
    box-shadow:          0px 0px 40px 10px rgba( 0, 0, 0, .4);
}
input[type="submit"]{
   
    border-radius: 0px;
    -o-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    padding: 5px;
    
    cursor          : pointer;
}

input[type="text"], input[type="password"], input[type="file"], textarea{
    /*    
    border:     1px solid #CCC;
    */
    background: #F5F5F5;
    color: #000;
    font-size: 14px;
    
}

form{
	margin:0px;
	padding: 0px;
}

a{
    color: #097D66;
    text-decoration: none;
    font-weight: normal;
}
link{
    color: #097D66;
    text-decoration: none;
    font-weight: normal;
}
a:link{
    color: #097D66;
    text-decoration: none;
    font-weight: normal;
}

a:visited {
	color: #097D66;
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	color: #BB0000;
	text-decoration: none;
}
.CURSOR-POINTER{
    cursor              : pointer;
}
#PAGE_INFO_DIALOG .FACES-POPUP-DIALOG-CONTENT-UI, .FACES-INFO-DIALOG .FACES-POPUP-DIALOG-CONTENT-UI{    
    padding			: 2vw 2vw 2vw 2vw;
}
.FACES-LOADING-INDICATOR-MODAL {
    flex                    : 1 1 100%;
    border                  : 0px solid #FFFFFF;
    width                   : 100%;
    height                  : 100%;
    text-align              : center;
    align-self              : center; 
    background              : rgba(255, 255, 255, 0.5);
    z-index                 : 2;
    padding                 : 0px 0px 0px 0px;
    margin                  : 0px 0px 0px 0px;
    position                : absolute;
    top                     : 0px;
    left                    : 0px;
    
    display			: flex;
    flex-direction		: row;
    flex-wrap			: wrap;
    justify-content		: center;
    align-content		: center;
    align-items			: center;
}
.FACES-LOADING-INDICATOR {
    display                 : flex;
    border                  : 10px solid #FFFFFF;
    -o-border-radius        : 50%;
    -moz-border-radius      : 50%;
    -webkit-border-radius   : 50%;
    border-radius           : 50%;
    border-top              : 10px solid #00aaff;
    border-bottom           : 10px solid #00aaff;
    width                   : calc(100px + 10vw);
    height                  : calc(100px + 10vw);
    text-align              : center;
    align-self              : center;
    -webkit-animation       : loadingSpin 2s linear infinite;
    animation               : loadingSpin 2s linear infinite;
    box-shadow              : 0px 0px 16px 0px #444444; 
    background              : transparent;
    z-index                 : 2;
    padding                 : 0px 0px 0px 0px;
    margin                  : 40px 40px 40px 40px;
}

.FACES-LOADING-INDICATOR.DIM-32X32 {
    display                 : flex;
    border                  : 5px solid #FFFFFF;
    -o-border-radius        : 50%;
    -moz-border-radius      : 50%;
    -webkit-border-radius   : 50%;
    border-radius           : 50%;
    border-top              : 5px solid #00aaff;
    border-bottom           : 5px solid #00aaff;
    width                   : 32px;
    height                  : 32px;
    text-align              : center;
    align-self              : center;
    -webkit-animation       : loadingSpin 2s linear infinite;
    animation               : loadingSpin 2s linear infinite;
    box-shadow              : 0px 0px 16px 0px #444444; 
    background              : transparent;
    z-index                 : 2;
    padding                 : 0px 0px 0px 0px;
    margin                  : 5px 5px 5px 5px;
}
@-webkit-keyframes loadingSpin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes loadingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.FACES-PAGE-HEADER, .FACES-PAGE-CONTENT, .FACES-PAGE-FOOTER{
    width                   : 100%;
    flex                    : 1 1 100%;
    display                 : flex;
    flex-wrap               : wrap;
    flex-direction          : row;
    justify-content         : center;
    align-content           : center;
    align-items             : center;
    text-align              : center;
    background      : #EAEAEA;
}
.FACES-PAGE-HEADER{
    background      : #FAFAFA;
    background      : #202020;
    border-bottom   : 4px solid #097d66; 
}
.FACES-PAGE-CONTENT{
    width           : 100%;
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;    
    margin-left     : auto;
    margin-right    : auto;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : flex-start;
    align-items     : flex-start;
    text-align      : left;
    border-top      : 0px solid #F0F0F0;
    background      : #EAEAEA;
    background      : #FFFFFF;
    
}

.AJAX-JSON-ERROR,
.AJAX-JSON-WARNING,
.AJAX-JSON-INFO{
    flex            : 1 1 100% !important;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start !important;
    align-content   : center;
    align-items     : center;
    text-align      : left !important;
    font-size       : 14px !important;    
    font-weight     : normal !important;
    color           : #770000 !important;
    padding         : 4px 4px 4px 4px !important;
    margin          : 0px 0px 1px 0px !important;
}
.AJAX-JSON-ERROR{
    color                   : #770000 !important;
    padding-left            : 32px !important;
    background              : transparent url('./images/error-28px.svg') left center no-repeat;
    background-size         : 28px auto;
    min-height              : 30px;
    margin                  : 0px 0px 1px 0px !important;
}
.AJAX-JSON-INFO{
    color           : #76A15B !important;
    padding-left            : 32px !important;
    background              : transparent url('./images/info-28px.svg') left center no-repeat;
    background-size         : 28px auto;
    min-height              : 30px;
    margin                  : 0px 0px 1px 0px !important;
}
.AJAX-JSON-WARNING{
    color                   : #b57663 !important;
    padding-left            : 32px !important;
    background              : transparent url('./images/warning-28px.svg') left center no-repeat;
    background-size         : 28px auto;
    min-height              : 30px;
    margin                  : 0px 0px 1px 0px !important;
}
.FORM-FIELD-ERROR{
    flex            : 1 1 100%;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    font-size       : 16px;    
    font-weight     : bold;
    color           : #bb0000;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
}



FACES_ROW_INFO, FACES_ROW_ERROR,FACES_ROW_SUCCESS{
    flex            : 1 1 100%;
    font-size       : calc(14px + 0.4vw);
    padding         : 5px;
    margin          : 5px;
    color           : #555555;
    font-weight     : bold;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    line-height     : 100%;
}
FACES_ROW_SUCCESS{
    color           : #0ca76c;
}
FACES_ROW_ERROR{
    color           : #BB0000;
}
.FACES-FORM-ROW {
    flex            : 1 1 100%;
    padding         : 20px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : stretch;
    text-align      : left;
    border          : 0px solid transparent;
    background      : transparent;
}
.FACES-FORM-SECTION-LABEL-UI{
    flex            : 1 1 100%;
    padding         : 10px 0px 10px 0px;
    margin          : 0px 0px 10px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    font-weight     : normal;
    font-size       : calc(12px + 1vw);
    color           : #202020;
    border-bottom   : 0px dashed #555555;
}
.FACES-FORM-LABEL{
    flex            : 1 1 100%;
    padding         : 0px 0px 4px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid transparent;
    background      : transparent;
    color           : #444444;
    font-weight     : normal;
    font-size       : 12px;
}
.FACES-FORM-LABEL.RIGHT{
    justify-content : flex-end;
    text-align      : right;
}
.FACES-FORM-LABEL span{
    flex            : none;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 10px;
    display         : inline;
    font-weight     : inherit;
    font-size       : inherit;
    color           : #666666;
}
input[type="text"].FACES-FORM-INPUT, 
input[type="number"].FACES-FORM-INPUT, 
input[type="password"].FACES-FORM-INPUT, 
input[type="date"].FACES-FORM-INPUT{
    width           : 100%;
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 10px;
    margin          : 0px 0px 0px 0px;
    height          : 52px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 1px solid #BBBBBB;
    background      : #FFFFFF;
    font-weight     : normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    
    height          : 32px;
    border          : 1px solid #CCCCCC;
    padding         : 4px 4px 4px 4px;
    color           : #9a804c !important;
    -o-border-radius        : 0px 0px 0px 0px;
    -moz-border-radius      : 0px 0px 0px 0px;
    -webkit-border-radius   : 0px 0px 0px 0px;
    border-radius           : 0px 0px 0px 0px;
    font-size               : calc(12px + 0.4vmin);
}

input[type=number]{
    position        : relative; 
    padding-right   : 30px !important; /* spin-button width */
}
input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    opacity             : 1;
    webkit-appearance   : inner-spin-button !important;
    position            : absolute;
    top                 : 0px;
    right               : 0px;
    width               : 30px;
    height              : 100%;
}
input[type=number].FACES-FORM-INPUT{
    position        : relative; 
    padding-right   : 30px !important; /* spin-button width */
}
input[type=number].FACES-FORM-INPUT::-webkit-outer-spin-button, 
input[type=number].FACES-FORM-INPUT::-webkit-inner-spin-button {
    opacity             : 1;
    webkit-appearance   : inner-spin-button !important;
    position            : absolute;
    top                 : 0px;
    right               : 0px;
    width               : 30px;
    height              : 100%;
}

textArea.FACES-FORM-INPUT{
    width               : 100%;
    flex                : 1 1 100%;
    padding             : 10px 10px 10px 10px;
    margin              : 0px 0px 0px 0px;
    height              : 100px;
    display             : flex;
    flex-direction      : row;
    flex-wrap           : wrap;
    justify-content     : flex-start;
    align-content       : center;
    align-items         : center;
    text-align          : left;
    border              : 1px solid #BBBBBB;
    background          : #FFFFFF;
    color               : #065192 !important;
    font-weight         : normal;
    font-size           : calc(12px + 0.3vw);
    -webkit-box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    box-sizing          : border-box;
    resize              : none; 
}


select.FACES-FORM-INPUT{
    width           : 100%;
    flex            : 1 1 100%;
    padding         : 10px 10px 10px 10px;
    margin          : 0px 0px 0px 0px;
    height          : 40px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 1px solid #BBBBBB;
    background      : #FFFFFF;
    color           : #9a804c !important;
    font-weight     : bold;
    font-size       : calc(12px + 0.2vw);
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    
    flex            : 1 1 150px;
    height          : 24px;
    font-size       : 12px;
    font-weight     : normal;
    padding         : auto 5px auto 5px ;
    margin          : 0px 0px 0px 0px ;
    border          : 1px solid #AAAAAA ;
    background                  : rgb(255,255,255) ;
    background                  : -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%) ;
    background                  : -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%) ;
    background                  : linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%) ;
    filter                      : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ) ;
}
.FACES-FORM-INPUT-INLINE-LABEL{
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid transparent;
    background      : #FFFFFF;
    color           : #444444;
    font-weight     : normal;
    font-size       : calc(12px + 0.3vw);
    position        : relative;
    overflow        : hidden;
    min-height      : calc(34px + 0.6vw);
    max-height      : 45px;
}
.FACES-FORM-INPUT-INLINE-LABEL input[type="text"].FACES-FORM-INPUT, 
.FACES-FORM-INPUT-INLINE-LABEL input[type="number"].FACES-FORM-INPUT, 
.FACES-FORM-INPUT-INLINE-LABEL input[type="password"].FACES-FORM-INPUT{
    display         : flex !important;
    flex-direction  : row !important;
    flex-wrap       : wrap !important;
    justify-content : center !important;
    align-content   : flex-start !important;
    align-items     : flex-start !important;
    text-align      : center !important;
    height          : inherit !important;
    max-height      : inherit !important;
    padding         : 5px 5px 20px 5px !important;
    margin          : 0px 0px 0px 0px !important;
    background      : transparent !important;
    z-index         : 3;
}
.FACES-FORM-INPUT-INLINE-LABEL > label{
    position        : absolute;
    bottom          : 4px;
    right           : 0px;
    flex            : 1 1 100%;
    width           : 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : center;
    align-items     : center;
    text-align      : center;
    border          : 0px solid transparent;
    background      : transparent;
    color           : #B0B0B0;
    font-weight     : normal;
    font-size       : calc(12px + 0.16vw);
    z-index         : 2;
}
.FACES-FORM-TERMS-ROW{
    flex            : 1 1 100%;
    padding         : 0px 0px 10px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : flex-start;
    align-content   : flex-start;
    align-items     : flex-start;
    text-align      : left;
    border          : 0px solid transparent;
    background      : transparent;
    color           : #220000;
    font-weight     : normal;
    font-size       : calc(12px + 0.3vw);
}

label.CUSTOMIZED-CHECKBOX{
    flex            : 0 0 62px;
    width           : 62px;
    height          : 62px;
    padding         : 1px 1px 1px 1px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    
    border          : 1px solid #BBBBBB;
    background      : #FFFFFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    
    
    -o-border-radius        : 4px;
    -moz-border-radius      : 4px;
    -webkit-border-radius   : 4px;
    border-radius           : 4px;
    
    cursor          : pointer;
}
label.CUSTOMIZED-CHECKBOX > CBOX{
    flex            : 1 1 100%;
    width           : 100%;
    height          : 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    border          : 0px solid #BBBBBB;
    background      : #F5F5F5 url('./images/tick-checkbox-unchecked.svg') center center no-repeat;
    background-size : 80%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    
    -o-border-radius        : 4px;
    -moz-border-radius      : 4px;
    -webkit-border-radius   : 4px;
    border-radius           : 4px;
    
    overflow        : hidden;
}

label.CUSTOMIZED-CHECKBOX > input[type="checkbox"]:checked + CBOX{
    border          : 0px solid #BBBBBB;
    background      : #FFAA12 url('./images/tick-checkbox-checked.svg') center center no-repeat;
    background-size : 80%;
}

label.CUSTOMIZED-CHECKBOX > input[type="checkbox"]{
    display         : none;
}

input[type="checkbox"].FACES-FORM-CHECKBOX{
    flex            : 0 0 62px;
    width           : 62px;
    height          : 62px;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 10px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    border          : 1px solid #BBBBBB;
    background      : #FFFFFF;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    
    -o-border-radius        : 10px;
    -moz-border-radius      : 10px;
    -webkit-border-radius   : 10px;
    border-radius           : 10px;
}

.FACES-FORM-TERMS-ROW > a{
    flex            : 1 1 auto;
    padding         : 0px 0px 10px 0px;
    margin          : 0px 0px 0px 0px;
    display         : inline;
    text-align      : justify;
    border          : 0px solid transparent;
    background      : transparent;
    color           : #333333;
    font-weight     : normal;
    font-size       : calc(12px + 0.1vw);
}


.FACES-FORM-TERMS-ROW > a span{
    flex            : none;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : inline;
    font-weight     : inherit;
    font-size       : inherit;
    color           : #BB0000;
}

#PAGE_INFO_DIALOG .FACES-POPUP-DIALOG-CONTENT-UI, .FACES-INFO-DIALOG .FACES-POPUP-DIALOG-CONTENT-UI{    
    padding			: 2vw 2vw 2vw 2vw;
}

.FACES-LOADING-INDICATOR {
    display                 : flex;
    border                  : 10px solid #FFFFFF;
    -o-border-radius        : 50%;
    -moz-border-radius      : 50%;
    -webkit-border-radius   : 50%;
    border-radius           : 50%;
    border-top              : 10px solid #00aaff;
    border-bottom           : 10px solid #00aaff;
    width                   : calc(100px + 10vw);
    height                  : calc(100px + 10vw);
    text-align              : center;
    align-self              : center;
    -webkit-animation       : loadingSpin 2s linear infinite;
    animation               : loadingSpin 2s linear infinite;
    box-shadow              : 0px 0px 16px 0px #444444; 
    background              : transparent;
    z-index                 : 2;
    padding                 : 0px 0px 0px 0px;
    margin                  : 40px 40px 40px 40px;
}
@-webkit-keyframes loadingSpin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes loadingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.FACES-MOUSE-HOVER-DISPLAY-ROOT{
    
}
.FACES-MOUSE-HOVER-DISPLAY-HIDDEN-ROOT:not(.FACES-EDITABLE){
    overflow                : hidden !important;
}
.FACES-MOUSE-HOVER-DISPLAY-HIDDEN-ROOT:not(.FACES-EDITABLE):hover{
    overflow                : visible !important;
    z-index                 : 999999;
}
.FACES-MOUSE-HOVER-DISPLAY-HIDDEN-ROOT:not(.FACES-EDITABLE) .FACES-MOUSE-HOVER-DISPLAY-HIDDEN-NODE:not(.FACES-EDITABLE){
    /*
    top                     : -2000px !important;
    transition-property     : top;
    transition-duration     : 0.4s;
    transition-delay        : 0.0s;
    z-index                 : 1;
    */
    opacity                 : 0 !important;
    transition-property     : opacity;
    transition-duration     : 0.4s;
    transition-delay        : 0.0s;
    z-index                 : 1;
}

.FACES-MOUSE-HOVER-DISPLAY-HIDDEN-ROOT:not(.FACES-EDITABLE):hover .FACES-MOUSE-HOVER-DISPLAY-HIDDEN-NODE:not(.FACES-EDITABLE){
    /*
    top                     : calc(100% - 10px) !important;
    transition-property     : top;
    transition-duration     : 1.4s;
    transition-delay        : 0.2s;
    z-index                 : 9;
    */
    opacity                 : 1 !important;
    transition-property     : opacity;
    transition-duration     : 1.4s;
    transition-delay        : 0.2s;
    z-index                 : 9;
}
.FACES-MOUSE-HOVER-DISPLAY-ROOT .FACES-MOUSE-HOVER-DISPLAY-NODE{
    left                    : -200% !important;
    transition-property     : left;
    transition-duration     : 0.4s;
    transition-delay        : 0.0s;
    z-index                 : 1;
}
.FACES-MOUSE-HOVER-DISPLAY-ROOT:hover .FACES-MOUSE-HOVER-DISPLAY-NODE{
    left                    : 0% !important;
    transition-property     : left;
    transition-duration     : 1.4s;
    transition-delay        : 0.2s;
}
.OVERLAY-SLIDING-NODE::after{
    content         : " ";
    position        : absolute;
    top             : 0px;
    left            : 0px;
    height          : 100%;
    width           : 100%;
    background      : rgba(222, 222, 222, 0.8);
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    transition-property     : height;
    transition-duration     : 1.4s;
    transition-delay        : 1.0s;
    
    
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );


    border-bottom   : 4px solid #FFFFFF;



}
.OVERLAY-ROOT:hover .OVERLAY-SLIDING-NODE::after{
    content                 : " ";
    height                  : 0px;
    border-width            : 0px;
    transition-property     : height    , border-width;
    transition-duration     : 1.6s      , 0.4s;
    transition-delay        : 0.0s      , 1.0s;
}
#YF_SWDEV_BUTTON1:hover{
    border          : 1px solid #FF0000;
    opacity         : 0.2;
}
.YF_SWDEV_BUTTON1_TOOLTIP{
    width                   : 100px;
    height                  : 40px;
    color                   : #FFFFFF;
    border                  : 1px solid #68b2d3;
    background              : rgba(160, 205, 225, 0.7);
    z-index                 : 999999;
    position                : absolute;
    left                    : 0px;
    top                     : 0px;
    
    
    -o-border-radius        : 10px 10px 10px 10px;
    -moz-border-radius      : 10px 10px 10px 10px;
    -webkit-border-radius   : 10px 10px 10px 10px;
    border-radius           : 6px 6px 6px 6px;
}

.YF_SWDEV_BUTTON1_TOOLTIP_HIDDEN{
    display                 : none;
}


.FACES-SMART-DOCS-UPLOAD-FORM-UI{
    flex            : 0 0 70px;
    height          : 70px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : center;
    align-items     : center;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    cursor          : pointer;
    border          : 0px dashed #606060;
    background      : #F0F0F0;
    position        : relative;
    overflow        : hidden;
    -o-border-radius        : 0px;
    -moz-border-radius      : 0px;
    -webkit-border-radius   : 0px;
    border-radius   : 100%;
    border          : 1px dashed #333333;
}
.FACES-SMART-DOCS-UPLOAD-FORM-UI > h1{
    flex            : 1 1 100%;
    height          : 100%;
    padding-top     : calc(10px + 2vw);
    padding-right   : calc(10px + 2vw);
    padding-bottom  : calc(10px + 2vw);
    padding-left    : calc(10px + 2vw);
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : center;
    align-items     : center;
    text-align      : center;
    background      : transparent;
    font-weight     : 700;
    font-size       : calc(56px + 2.0vw);
    color           : #FFAA12;
    position        : relative;
    overflow        : hidden;
    -o-border-radius        : 40px;
    -moz-border-radius      : 40px;
    -webkit-border-radius   : 40px;
    border-radius           : 40px;
    background          : #F0F0F0;
}

input.FACES-SMART-DOCS-UPLOAD-FILEFIELD{
    position            : absolute;
    top                 : -10px;
    left                : -10px;
    z-index             : -2;
    width               : 0px !important;
    height              : 0px !important;
    visibility          : hidden;
}
.FACES-SMART-DOCS-UPLOAD-INDICATOR {
    display             : none;
    border              : 5px solid #333333;
    border-top          : 5px solid #E2BC55;
    border-bottom       : 5px solid #E2BC55;
    -o-border-radius        : 50%;
    -moz-border-radius      : 50%;
    -webkit-border-radius   : 50%;
    border-radius           : 50%;
    width               : 60px;
    height              : 60px;
    -webkit-animation   : spinUpload 2s linear infinite;
    animation           : spinUpload 2s linear infinite;
    box-shadow          : 0px 0px 16px 0px #444444; 
    background          : transparent;
    z-index             : 2;
    position            : absolute;
    top                 : calc(50% - 30px);
    left                : calc(50% - 30px);
}
.FACES-SMART-DOCS-UPLOAD-INPROGRESS-BUSY .FACES-SMART-DOCS-UPLOAD-INDICATOR {
    display             : flex !important;
}
@-webkit-keyframes spinUpload {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinUpload {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#COOKIES_AGREEMENT_DIALOG{
    z-index             : 999999999;
    width               : 100vw;
    height              : 100vh;
    overflow            : auto;
    position            : fixed; 
    top                 : 0px; 
    left                : 0px;
    background          : transparent;
    display			: flex; 
    flex-direction		: row; 
    flex-wrap			: wrap; 
    justify-content		: center;
    align-content		: center;
    align-items			: center;
    padding			: 5px 5px 5px 5px;
    margin			: 0px 0px 0px 0px;
}/*
#COOKIES_AGREEMENT_DIALOG.DARK{
    background-color        : rgba(0, 0, 0, 0.4);
    transition-property     : background-color;
    transition-duration     : 0.0s;
    transition-delay        : 0s;
}*/
#COOKIES_AGREEMENT_DIALOG > div {
    flex                : 1 1 100%;
    max-width           : 600px;
    min-height          : 200px;
    overflow            : auto;
    font-size           : 14px;
    color               : #404040;
    background          : #F0F0F0;
    display			: inline-flex; 
    flex-direction		: row; 
    flex-wrap			: wrap; 
    justify-content		: center;
    align-content		: center;
    align-items			: center;
    text-align                  : left;
    padding			: 10px 10px 10px 10px;
    margin			: 20px 0px 20px 0px;
    margin-left                 : auto;
    margin-right                : auto;
    border                      : 5px solid #666666;
    box-shadow                  : 0px 0px 20px 0px #666666; 
}
#COOKIES_AGREEMENT_DIALOG > div > div{
    flex                : 1 1 100%;
    max-height          : 120px;
    overflow            : auto;
    font-size           : 14px;
    color               : #444444;
    background          : #FFFFFF;
    display			: flex; 
    flex-direction		: row; 
    flex-wrap			: wrap; 
    justify-content		: flex-start;
    align-content		: flex-start;
    align-items			: flex-start;
    text-align                  : left;
    padding			: 10px 10px 10px 10px;
    margin			: 20px 0px 20px 0px;
    margin-left                 : auto;
    margin-right                : auto;
    border                      : 1px solid #D0D0D0;
}
#COOKIES_AGREEMENT_DIALOG > div > span {
    flex                : 1 1 100%;
    text-align          : left;
    font-size           : inherit;
    color               : inherit;
    background          : transparent;
    display			: inline;
    padding			: 0px 0px 0px 0px;
    margin			: 0px 0px 0px 0px;
    border                      : none;
}
#COOKIES_AGREEMENT_DIALOG > div > span > a {
    text-align          : left;
    font-size           : inherit;
    color               : #c7830e;
    background          : transparent;
    display			: inline;
    padding			: 0px 0px 0px 0px;
    margin			: 0px 5px 0px 5px;
    border                      : none;
}


#COOKIES_AGREEMENT_DIALOG > div > h1,
#COOKIES_AGREEMENT_DIALOG > div > h2{
    flex                        : 1 1 100%;
    font-weight                 : bold;    
    font-size                   : 14px;
    color                       : #404040;
    background                  : transparent;
    display			: flex; 
    flex-direction		: row; 
    flex-wrap			: wrap; 
    justify-content		: flex-start;
    align-content		: center;
    align-items			: center;
    text-align                  : left;
    padding			: 10px 10px 10px 0px;
    margin			: 0px 0px 10px 0px;
    border-bottom               : 1px solid #AAAAAA;
}
#COOKIES_AGREEMENT_DIALOG > div > h1{
    font-size                   : 18px;
    color                       : #c7830e;
    border-bottom               : 0px solid #AAAAAA;
}
#COOKIES_AGREEMENT_DIALOG > div > form{
    flex                        : 1 1 100%;
    background                  : transparent;
    display			: flex; 
    flex-direction		: row; 
    flex-wrap			: wrap; 
    justify-content		: center;
    align-content		: center;
    align-items			: center;
    text-align                  : center;
    padding			: 10px 10px 10px 0px;
    margin			: 20px 0px 0px 0px;
}


.FACES-INLINE-SELECT-MENU{
    flex            : 0 1 340px;
    min-width       : 280px;
    max-width       : 450px;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 10px 30px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : flex-start;
    align-items     : stretch;
    text-align      : center;
    border          : 0px solid #D0D0D0;
    background      : #FFFFFF;
    position        : relative;
    overflow        : visible;
}

.FACES-INLINE-SELECT-MENU > h1{
    flex            : 1 1 100%;
    padding         : 10px 10px 10px 10px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : #bdb1a0;
    color           : #FFFFFF;
    font-weight     : normal;
    font-size       : 14px;
}
.FACES-INLINE-SELECT-MENU > h2{
    flex            : 1 1 100%;
    padding         : 5px 5px 5px 5px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #b5770c;
    font-weight     : normal;
    font-size       : 14px;
    min-height              : 28px;
}
.FACES-INLINE-SELECT-MENU > h3.WARNING{
    flex            : 1 1 100%;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    font-size       : 14px;    
    font-weight     : normal;
    padding         : 4px 4px 4px 40px;
    margin          : 0px 0px 0px 0px;
    color                   : #b0641c;
    background              : transparent url('./images/warning-28px.svg') 5px center no-repeat;
    background-size         : 28px auto;
    min-height              : 28px;
}
.FACES-INLINE-SELECT-MENU-ITEMS{
    flex            : 1 1 100%;
    padding         : 5px 0px 0px 5px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : flex-start;
    align-items     : stretch;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : #FFFFFF;
    overflow        : hidden;
    max-height      : 48px;
    transition-property     : max-height;
    transition-duration     : 0.6s;
    transition-delay        : 0.0s;
    position        : relative;
}

.FACES-INLINE-SELECT-MENU-ITEM{
    flex            : 1 1 100%;
    min-width       : 200px;
    padding         : 8px 8px 8px 5px;
    margin          : 0px 5px 5px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : stretch;
    text-align      : left;
    border          : 1px solid #bab1a5;
    background      : transparent;
}
.FACES-INLINE-SELECT-MENU-ITEM:hover{
    background      : #bdb1a0;
    color           : #826a42;
    border          : 1px solid #b3935a;
}
.FACES-INLINE-SELECT-MENU-ITEM:hover > label > div{
    color           : #826a42;
    background      : transparent url('images/checkbox-18px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM:hover > label > input:checked + div{
    color           : #826a42;
    background      : transparent url('images/checkbox-checked-18px-sandy.svg') left center no-repeat;
    
}

.FACES-INLINE-SELECT-MENU-ITEM > label{
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : stretch;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    cursor          : pointer;
}
.FACES-INLINE-SELECT-MENU-ITEM > label > input{
    display         : none;
}

.FACES-INLINE-SELECT-MENU-ITEM > label > div{
    flex            : 1 1 auto;
    padding         : 0px 0px 0px 22px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #444444;
    font-weight     : normal;
    font-size       : 12px;
    min-height      : 20px;
    background      : transparent url('images/checkbox-18px-gray.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM > label > div > span{
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #777777;
    font-weight     : normal;
    font-size       : 12px;
    background      : transparent;
}
.FACES-INLINE-SELECT-MENU-ITEM > label > input:checked + div{
    background      : transparent url('images/checkbox-checked-18px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM > label > input[type="radio"] + div{
    background      : transparent url('images/radio-20px-sandy.svg') left center no-repeat;
    padding-left    : 24px;
}
.FACES-INLINE-SELECT-MENU-ITEM > label > input[type="radio"]:checked + div{
    background      : transparent url('images/radio-checked-20px-sandy.svg') left center no-repeat;
    padding-left    : 24px;
}


.FACES-INLINE-SELECT-MENU-ITEM.PX24 > label > div{
    padding         : 0px 0px 0px 28px;
    height          : 24px;
    background      : transparent url('images/checkbox-24px-gray.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM.PX24:hover > label > div{
    background      : transparent url('images/checkbox-24px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM.PX24 > label > input:checked + div{
    padding         : 0px 0px 0px 28px;
    background      : transparent url('images/checkbox-checked-24px-sandy.svg') left center no-repeat;
}

.FACES-INLINE-SELECT-MENU-ITEM.PX24 > label > input[type="radio"] + div{
    padding         : 0px 0px 0px 28px;
    height          : 24px;
    background      : transparent url('images/radio-24px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM.PX24:hover > label > input[type="radio"] + div{
    background      : transparent url('images/radio-24px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM.PX24 > label > input[type="radio"]:checked + div{
    padding         : 0px 0px 0px 28px;
    background      : transparent url('images/radio-checked-24px-sandy.svg') left center no-repeat;
}

.FACES-INLINE-SELECT-MENU-ITEM.PX32 > label > div{
    padding         : 0px 0px 0px 36px;
    height          : 32px;
    background      : transparent url('images/checkbox-32px-gray.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM.PX32:hover > label > div{
    background      : transparent url('images/checkbox-32px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM.PX32 > label > input:checked + div{
    padding         : 0px 0px 0px 36px;
    background      : transparent url('images/checkbox-checked-32px-sandy.svg') left center no-repeat;
}
.FACES-INLINE-SELECT-MENU-ITEM > label > div > strong{
    color           : inherit;
    font-size       : inherit;
    font-family     : inherit;
    font-weight     : bold;
    
    flex            : 0 0 auto;
    display         : inline;
    text-align      : left;
    margin          : 0px 4px 0px 4px;
}

.FACES-INLINE-SELECT-MENU-ITEM > label > span{
    flex            : 0 0 65px;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-end;
    align-content   : center;
    align-items     : center;
    text-align      : right;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #444444;
    font-weight     : normal;
    font-size       : 12px;
}

.FACES-INLINE-SELECT-MENU-ITEM:hover > label > div > span{
    color           : #FFFFFF;
}

.FACES-INLINE-SELECT-MENU-EXPANDER{
    position        : absolute;
    bottom          : -16px;
    left            : 0px;
    flex            : 1 1 100%;
    width           : 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : center;
    align-items     : center;
    text-align      : center;
    border          : 0px solid #D0D0D0;
    cursor          : pointer;
    
    background      : #FFFFFF;
    
}
.FACES-INLINE-SELECT-MENU-EXPANDER span{
    flex            : 1 1 100%;
    height          : 16px;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : center;
    align-items     : center;
    text-align      : center;
    border          : 0px solid #D0D0D0;
    background      : transparent url('images/arrow-down-dbl-18px.svg') center top no-repeat;
    
}
.FACES-INLINE-SELECT-MENU-EXPANDER .FACES-CLASS-SWITCHER-CHECKBOX{
    display         : none;
}
.FACES-INLINE-SELECT-MENU-EXPANDER .FACES-CLASS-SWITCHER-CHECKBOX:checked + span{
    background      : transparent url('images/arrow-up-dbl-18px.svg') center top no-repeat;
}
.FACES-INLINE-SELECT-MENU-MAX-HEIGHT{
    overflow                : auto;
    max-height              : 1000px !important;
    transition-property     : max-height;
    transition-duration     : 0.6s;
    transition-delay        : 0.0s;
}

/* ************************************************************************************************
** CUSTOM CHECKBOX
*/
label.FACES-CHECKBOX {
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : stretch;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    cursor          : pointer;
}
label.FACES-CHECKBOX > input{
    display         : none;
}

label.FACES-CHECKBOX > div{
    flex            : 1 1 auto;
    padding         : 0px 0px 0px 22px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #555555;
    font-weight     : normal;
    font-size       : calc(12px + 0.2vw);
    min-height      : 20px;
    background      : transparent url('images/checkbox-18px-gray.svg') left center no-repeat;
}
label.FACES-CHECKBOX.MEDIUM-SIZE > div{
    flex            : 1 1 auto;
    padding-left    : 44px;
    min-height      : 40px;
    background-size : 36px 36px !important;
}
label.FACES-CHECKBOX > div > span{
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    text-align      : left;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #777777;
    font-weight     : normal;
    font-size       : 12px;
    background      : transparent;
}
label.FACES-CHECKBOX > input:checked + div{
    background      : transparent url('images/checkbox-checked-18px-sandy.svg') left center no-repeat;
}
label.FACES-CHECKBOX > span{
    flex            : 0 0 65px;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-end;
    align-content   : center;
    align-items     : center;
    text-align      : right;
    border          : 0px solid #D0D0D0;
    background      : transparent;
    color           : #444444;
    font-weight     : normal;
    font-size       : 12px;
}

tooltip{
    flex            : 0 0 auto;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 4px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : center;
    align-content   : center;
    align-items     : center;
    text-align      : center;
    border          : 0px solid #D0D0D0;
    color           : #444444;
    font-weight     : normal;
    font-size       : 12px;
    -webkit-box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    box-sizing          : border-box;
    
    background      : transparent url('images/tooltip-icon-16x14px-orang.svg') center center no-repeat;
    background-size : 16px auto;
    min-width       : 16px;
    min-height      : 14px;
    cursor          : pointer;
}
tooltip > ui{
    display         : none;
}

.IMG-SIZING-PARENT-WIDTH > img{
    flex        : 0 0 auto !important;
    width       : 100% !important;
    max-width   : inherit !important;
    height      : auto !important;
    max-height  : inherit !important;
    -webkit-box-sizing  : border-box !important;
    -moz-box-sizing     : border-box !important;
    box-sizing          : border-box !important;
}

@-webkit-keyframes white-shadow{
    0%{
        box-shadow:0 0 rgba(255,255,255,1)
    }
    50%{
        box-shadow:0 0 0 12px rgba(255,255,255,0)
    }
    100%{
        box-shadow:0 0 rgba(255,255,255,0)
    }
}
@-moz-keyframes white-shadow{
    0%{
        box-shadow:0 0 rgba(255,215,0,1)
    }
    50%{
        box-shadow:0 0 0 12px rgba(255,215,0,0)
    }
    100%{
        box-shadow:0 0 rgba(255,215,0,0)
    }
}
@keyframes white-shadow{
    0%{
        box-shadow:0 0 rgba(255,255,255,1)
    }
    50%{
        -moz-transform:scale(1.1);
        box-shadow:0 0 0 12px rgba(255,255,255,0)
    }
    100%{
        box-shadow:0 0 rgba(255,255,255,0)
    }
}
@keyframes sandy-flash-bg{
    0%{
        box-shadow:0 0 rgba(255,255,255,1)
    }
    50%{
        -moz-transform:scale(1.1);
        box-shadow:0 0 0 12px rgba(255,255,255,0)
    }
    100%{
        box-shadow:0 0 rgba(255,255,255,0)
    }
}
.PULSAR-HOTSPOT{
    cursor                  : pointer;
    -webkit-animation       : white-shadow 2s ease-out infinite;
    -moz-animation          : white-shadow 2s ease-out infinite;
    animation               : white-shadow 2s ease-out infinite;
}
.PULSAR-HOTSPOT:hover{
    cursor                  : crosshair;
    -webkit-animation       : none;
    -moz-animation          : none;
    animation               : none;
}
.PULSAR-HOTSPOT:hover > *{
    cursor                  : initial;
}

.DECO-PAGE{
    width           : 100%;
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;    
    margin-left     : auto;
    margin-right    : auto;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : center;
    align-content   : flex-start;
    align-items     : stretch;
    text-align      : left;
    border          : 0px solid #888888;
    background      : #FFFFFF;
}

.ONCLICK-VIEW-CONTENT-MODAL-DIALOG{
    cursor          : zoom-in;
}

.BG-FIT2PARENT > img{
    width           : 100% !important;
    height          : 100% !important;
    max-height      : 100% !important;
}

.TO-PARENTHEIGHT > picture,
.TO-PARENTHEIGHT > img{
    width           : auto !important;
    min-width       : inherit !important;
    max-width       : inherit !important;
    height          : inherit !important;
    max-height      : inherit !important;
}

.SPACE-L,
.SPACE-R,
.COL-L,
.COL-R,
.UI-BODY{
    flex                : 1 1 200px;
    padding             : 0px 0px 0px 0px;
    margin              : 0px 0px 0px 0px;
    display             : flex;
    flex-direction      : row;
    flex-wrap           : wrap;
    justify-content     : center;
    align-content       : flex-start;
    align-items         : stretch;
    text-align          : center;
    
    -webkit-box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    box-sizing          : border-box;
    background          : transparent;
    position            : relative;
}
.SPACE-L,
.SPACE-R{
    flex                : 1 1 10px;
}
.UI-BODY{
    /*
    flex                : 0 1 1620px;
    flex-basis          : calc(800px + 35vw);
    */
    max-width           : 1920px;
    background          : transparent;
}


.COL-L,
.COL-R{
    display             : none;
    flex                : 0 0 60px;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 );

}
/*
.COL-R{
    background: rgb(229,229,229);
    background: -moz-linear-gradient(left,  rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=1 );


}
.COL-L:after,
.COL-R:after{
    
    content             : " ";
    position            : absolute;
    right               : 1px;
    top                 : 0px;
    height              : 100%;
    flex                : 0 0 10px;
    width               : 10px;
    padding             : 0px 0px 0px 0px;
    margin              : 0px 0px 0px 0px;
    display             : flex;
    flex-direction      : row;
    flex-wrap           : wrap;
    justify-content     : center;
    align-content       : center;
    align-items         : center;
    text-align          : center;
    -webkit-box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    box-sizing          : border-box;
    border-left         : 0px solid #FFFFFF;
    border-right        : 1px solid #FFFFFF;
    background          : transparent url('/images/ui.col.L.bg.silver.svg') top left repeat;
    
}

.COL-R:after{
    
    right               : auto;
    left                : 1px;
    border-left         : 1px solid #FFFFFF;
    border-right        : 0px solid #FFFFFF;
    
}
*/


.FACES-REVIEWS-HEADER-HIGHTLIGHT-VIDEO-UI{
    flex            : 1 1 100%;
    min-width       : 240px;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 10px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : flex-start;
    align-items     : flex-start;
    text-align      : left;
    border          : 0px solid #BB0000;
}
.FACES-REVIEWS-HEADER-HIGHTLIGHT-VIDEO-UI > video{
    width           : 100%;
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : flex-start;
    align-items     : flex-start;
    border          : 0px solid #BB0000;
    cursor          : auto;
}

.FACES-REVIEWS-HEADER-HIGHTLIGHT-VIDEO-UI > div{
    flex            : 1 1 100%;
    padding         : 0px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : center;
    align-items     : center;
    border          : 0px solid #BB0000;
    font-weight     : normal;
    font-size       : 12px;
    color           : #888888;
    font-style      : italic; 
}



.FACES-FORM-UI {
    flex            : 1 1 100%;
    padding         : 10px 10px 10px 10px;
    margin          : 0px 0px 0px 0px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : flex-start;
    align-content   : flex-start;
    align-items     : stretch;
    text-align      : center;
    border          : 0px solid transparent;
    background      : #F0F0F0;
}
.FACES-FORM-UI .FACES-FORM-ROW {
    padding         : 5px 0px 0px 0px;
    margin          : 0px 0px 0px 0px;
}
.FACES-FORM-UI .FACES-FORM-LABEL{
    padding         : 0px 0px 4px 0px;
    color           : #444444;
    font-size	    : 12px;
}

.FACES-FORM-UI .FACES-FORM-LABEL span{
    color           : #666666;
    margin-left     : 8px;
    font-size       : 11px;
}
.FACES-FORM-UI input[type="text"].FACES-FORM-INPUT, 
.FACES-FORM-UI input[type="number"].FACES-FORM-INPUT, 
.FACES-FORM-UI input[type="password"].FACES-FORM-INPUT,
.FACES-FORM-UI select.FACES-FORM-INPUT,
.FACES-FORM-UI textarea.FACES-FORM-INPUT{
    height          : 32px;
    border          : 1px solid #CCCCCC;
    padding         : 4px 4px 4px 4px;
    color           : #9a804c !important;
    -o-border-radius        : 0px 0px 0px 0px;
    -moz-border-radius      : 0px 0px 0px 0px;
    -webkit-border-radius   : 0px 0px 0px 0px;
    border-radius           : 0px 0px 0px 0px;
    font-size               : calc(12px + 0.4vmin);
}
input.FACES-FORM-INPUT:disabled{
    text-decoration     : line-through;
    color               : #888888 !important;
}
.FACES-FORM-UI textarea.FACES-FORM-INPUT{
    height          : 140px;
}
.FACES-FORM-UI input[type="submit"]{
    flex                    : 0 0 auto;
    padding                 : 10px 10px 10px 10px;
    margin                  : 10px 0px 0px 0px;
    display                 : flex;
    flex-direction          : row;
    flex-wrap               : wrap;
    justify-content         : center;
    align-content           : center;
    align-items             : center;
    text-align              : center;
    -o-border-radius        : 0px 0px 0px 0px;
    -moz-border-radius      : 0px 0px 0px 0px;
    -webkit-border-radius   : 0px 0px 0px 0px;
    border-radius           : 0px 0px 0px 0px;
    font-weight             : normal;
    font-size               : calc(12px + 0.2vw);
    color                   : #550000;
    background              : #ffd633;
    
    word-wrap               : break-word;
    overflow-wrap           : break-word;
    white-space             : pre-wrap;
    word-break              : normal;
    
    align-self              : center;
    
    border                  : 1px solid #9e680b;
    border-left             : 1px solid #fff0a4;
    border-top              : 1px solid #fff0a4;
    
    border                  : 0px solid #a5c3d5;
    border-right            : 0px solid #315063;
    border-bottom           : 0px solid #315063;
    
    cursor                  : pointer;
    
    

}
button.MULTI-LINE {
    flex                    : 0 0 auto;
    padding                 : 10px 10px 10px 10px;
    margin                  : 0px 0px 0px 0px;
    gap                     : 5px 5px;
    display                 : flex;
    flex-direction          : row;
    flex-wrap               : wrap;
    justify-content         : center;
    align-content           : center;
    align-items             : center;
    text-align              : center;
    -o-border-radius        : 0px 0px 0px 0px;
    -moz-border-radius      : 0px 0px 0px 0px;
    -webkit-border-radius   : 0px 0px 0px 0px;
    border-radius           : 0px 0px 0px 0px;
    font-weight             : normal;
    font-size               : calc(12px + 0.2vw);
    color                   : #5e3e06;
    background              : #CCAA66;
    
    word-wrap               : break-word;
    overflow-wrap           : break-word;
    white-space             : pre-wrap;
    word-break              : normal;
    
    align-self              : center;
    
    border                  : 1px solid #9e680b;
    border-left             : 1px solid #fff0a4;
    border-top              : 1px solid #fff0a4;
    cursor                  : pointer;

}
button.MULTI-LINE h2{
    flex			: 0 0 auto;
    display			: flex;
    flex-direction		: row;
    flex-wrap			: wrap;
    justify-content		: center;
    align-content		: center;
    align-items			: center;
    border                      : 0px solid #AAAAAA;
    border-bottom               : 0px solid #5e3e06;
    border-radius               : 0px 0px 0px 0px;
    padding			: 5px 0px 5px 0px;
    margin			: 0px 0px 0px 0px;
    position                : relative;
    cursor                  : pointer;
    background              : #5e3e06;
    background              : transparent;
    
    font-size               : calc(14px + 0.6vmin);
    font-weight             : normal;
    color                   : #5e3e06;
    font-family             : 'LeagueGothic','Arial', sans-serif;

}

.UI-FORM input[type="submit"].PLUS-BUTTON,
.UI-FORM input[type="submit"].SAVE-BUTTON,
.UI-FORM input[type="submit"].TRASH-BUTTON,
.UI-FORM input[type="submit"].ARROW-BUTTON{
    flex            : 0 0 32px !important;
    width           : 32px !important;
    height          : 32px !important;
    min-width       : 20px !important;
    background      : #F0F0F0 url('/images/icon.plus-thick.svg') center center no-repeat;
    border          : 1px solid #CCCCCC !important;
    
    
    padding         : 0px 0px 0px 0px !important;
    margin          : 0px 0px 0px 0px !important;
    
    -o-border-radius        : 0px 3px 3px 0px !important;
    -moz-border-radius      : 0px 3px 3px 0px !important;
    -webkit-border-radius   : 0px 3px 3px 0px !important;
    border-radius           : 3px 3px 3px 3px !important;
    
}

ul.MARKER-BOLD > li::marker,
ol.MARKER-BOLD > li::marker {
    font-weight : bold;
    font-size   : 1.4em;
}
ul.MARKER-SQU > li {
    list-style: square;
    
}
ul.MARKER-BOLD.MARKER-SQU > li::marker  {
    font-size   : 2.0em;
    font-weight : bold;
    overflow    : hidden;
    line-height : 100%;
    top  : 1.2em;
}