/************************** FONTS ******************************/
/*ROBOTO*/
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400;
  src: local('Roboto Regular'),local('Roboto-Regular'), url('../webfonts/Roboto-Regular.woff2') format('woff2'), url('../webfonts/Roboto-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto-Medium'; font-style: normal; font-weight: 500;
  src: local('Roboto Medium'),local('Roboto-Medium'), url('../webfonts/Roboto-Medium.woff2') format('woff2'), url('../webfonts/Roboto-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Roboto-Bold'; font-style: normal; font-weight: 700;
  src: local('Roboto Bold'),local('Roboto-Bold'), url('../webfonts/Roboto-Bold.woff2') format('woff2'), url('../webfonts/Roboto-Bold.woff') format('woff');
}
/*QUICKSAND*/
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400;
  src: local('Quicksand Regular'),local('Quicksand-Regular'), url('../webfonts/Quicksand-Regular.woff2') format('woff2'), url('../webfonts/Quicksand-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Quicksand-Medium'; font-style: normal; font-weight: 500;
  src: local('Quicksand Medium'),local('Quicksand-Medium'), url('../webfonts/Quicksand-Medium.woff2') format('woff2'), url('../webfonts/Quicksand-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Quicksand-Bold'; font-style: normal; font-weight: 700;
  src: local('Quicksand Bold'),local('Roboto-Bold'), url('../webfonts/Quicksand-Bold.woff2') format('woff2'), url('../webfonts/Quicksand-Bold.woff') format('woff');
}

/************************** VARIABLES ******************************/
:root {
  /* colors */
  /*--fwk-primary-color: #1a237e;
  --fwk-primary-dark-color: #000051;
  --fwk-primary-light-color: #534bae;*/
  --fwk-primary-color: #515151;
  --fwk-primary-dark-color: #000000;
  --fwk-primary-light-color: #AAA ;/* rgba(0, 0, 0, 0.26);*/

  --fwk-secondary-color: #1a237e;
  --fwk-secondary-dark-color: #000051;
  --fwk-secondary-light-color: rgb(51, 49, 143);

  --fwk-primary-text-color: rgba(0, 0, 0, 0.87); 
  --fwk-primary-dark-text-color: #000000;
  --fwk-primary-light-text-color: rgba(0, 0, 0, 0.26);

  --fwk-primary-bg: #EDEDED;

  /*--oa-secondary-text-color: #757575;*/
  --fwk-text-on-primary-color: #FFFFFF;
  --fwk-text-on-secondary-color: #ffffff;

  --fwk-color-red: #E81717;
  --fwk-color-green: #217346;
  --fwk-divider-color: rgba(0, 0, 0, 0.12);
  
  /* fonts */
  --fwk-font: 'Roboto';
  --fwk-font-bold: 'Roboto-Bold';
  --fwk-font-medium: 'Roboto-Medium';
}

/************************** GLOBALS ******************************/
*:not(font) { -webkit-font-smoothing : subpixel-antialiased; box-sizing: border-box; outline: none; }
html { height:100%; width:100%; margin:0px; padding:0px; overflow:hidden;}
body { height:100%; width:100%; margin:0px; padding:0px; overflow:hidden;  font-family:var(--fwk-font), Arial, sans-serif; font-size: 12px; font-weight: 400; color:#333333; }
b { font-family: var(--fwk-font-bold); }/*font-weight: 500;*/
strong { font-family: var(--fwk-font-medium); font-weight: 500; }
a, a:hover, a:focus, a:active { text-decoration:none !important; color: inherit;}

/************************** FWK ******************************/
#FwkCore { width:100%; height: 100%; }
.fwk-loading * { cursor:wait !important; }

/************************** UTILS ******************************/
.scrollable { overflow-y: auto; overflow-x: hidden; } /*-webkit-overflow-scrolling: touch;*/
.selectable { user-select: text; }
.unselectable { user-select: none; }
.hidden { visibility: hidden; }
.buttonMode { cursor:pointer; }

/************************** MARGINS ******************************/
.mt4{margin-top:4px;} .mr4{margin-right:4px;} .mb4{margin-bottom:4px;} .ml4{margin-left:4px;} .mg4{margin:8px;}
.mt8{margin-top:8px;} .mr8{margin-right:8px;} .mb8{margin-bottom:8px;} .ml8{margin-left:8px;} .mg8{margin:8px;}
.mt16{margin-top:16px;} .mr16{margin-right:16px;} .mb16{margin-bottom:16px;} .ml16{margin-left:16px;} .mg16{margin:16px;}
.mt32{margin-top:32px;} .mr32{margin-right:32px;} .mb32{margin-bottom:32px;} .ml32{margin-left:32px;} .mg32{margin:32px;}

/************************** PADDINGS ******************************/
.pt4{padding-top:4px;} .pr4{padding-right:4px;} .pb4{padding-bottom:4px;} .pl4{padding-left:4px;} .pd4{padding:4px;}
.pt8{padding-top:8px;} .pr8{padding-right:8px;} .pb8{padding-bottom:8px;} .pl8{padding-left:8px;} .pd8{padding:8px;}
.pt16{padding-top:16px;} .pr16{padding-right:16px;} .pb16{padding-bottom:16px;} .pl16{padding-left:16px;} .pd16{padding:16px;}
.pt32{padding-top:32px;} .pr32{padding-right:32px;} .pb32{padding-bottom:32px;} .pl32{padding-left:32px;} .pd32{padding:32px;}
.pdtlr16 { padding: 16px 16px 0px 16px; }

/************************** BUTTON CLEAR ALL BROWSER STUFF ******************************/
button {
  border:none; background:none; cursor:pointer; color: inherit;
  box-sizing:border-box; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  text-decoration:none; outline:none; user-select:none; overflow:hidden;
  padding:0px; margin:0px;
}

/************************** FIELDSET CLEAR ALL BROWSER STUFF ******************************/
fieldset { border:1px solid var(--fwk-primary-light-text-color); padding: 8px; margin-top: 8px; min-width: 0;}
fieldset > legend { color: var(--fwk-primary-light-text-color); }

/************************** GLOBAL CLASS ******************************/
.fwk-header-text { font-size: 20px; font-family: var(--fwk-font-bold); color:var(--fwk-primary-color); }
.fwk-input-inline {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; align-content: center;  margin: 0 0 0 -16px; width: calc(100% + 16px);}
.fwk-input-inline > div { margin: 0 0 0 16px; flex:1;}
.fwk-checkbox-label { font-size: 16px; font-family: var(--fwk-font-medium); color: var(--fwk-primary-light-text-color); white-space: nowrap; }
.fwk-flex1 { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; }
.fwk-flexsp { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.fwk-flexct { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }

.fwk-content-header { text-align:center; border-bottom: 1px solid var(--fwk-divider-color); text-transform: uppercase; padding-bottom: 4px;}/*#E2E8ED;*/
.fwk-content-container p {  font-size: 14px; text-align: justify; }
.fwk-content-container img { width:100%; }
.fwk-content-subtitle { font-size: 14px; font-family: var(--fwk-font-bold); color:var(--fwk-primary-color); margin-bottom: 16px; border-bottom: 1px solid var(--fwk-divider-color); text-transform: uppercase;}
.fwk-content-subtitle2 { font-size: 14px; font-family: var(--fwk-font-bold); color:var(--fwk-primary-color); margin-bottom: 8px; text-transform: uppercase; width: fit-content; block-size: fit-content;}
.fwk-content-double-img { display: flex; flex-flow: row nowrap; align-content: flex-start; justify-content: space-between; width: 100%;}
.fwk-content-double-img > img { width:calc(50% - 8px); }
@media (max-width: 360px) {
  .fwk-content-container p { font-size: 12px; }
  .fwk-content-subtitle { font-size: 12px; } 
}
.fwk-card-container { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; align-content: center; }
.fwk-content-card {
  display: flex; flex-flow: column nowrap; justify-content: center; align-items: stretch; 
  width:400px; padding:16px; font-size:14px; border:1px solid var(--fwk-primary-light-text-color); border-radius:2px; margin:8px;
}
.fwk-content-card div:first-child { font-family: var(--fwk-font-bold); margin-bottom:8px;}
.fwk-content-card div:nth-child(2) { font-family: var(--fwk-font); color:var(--fwk-primary-text-light-color); flex:1;}
.fwk-content-card div:nth-child(3) { text-align: right; margin-top:8px; }

/************************** SCROLLBAR ******************************/
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); box-shadow: inset 0 0 2px rgba(0,0,0,0.3);}
/*::-webkit-scrollbar-thumb {background: rgba(26,35,126,0.8); -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); box-shadow: inset 0 0 2px rgba(0,0,0,0.5);}*/
::-webkit-scrollbar-thumb {background: var(--fwk-primary-light-color); -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); box-shadow: inset 0 0 2px rgba(0,0,0,0.5);}
/*::-webkit-scrollbar-thumb:window-inactive {background: rgba(26,35,126,0.4);}*/
::-webkit-scrollbar-thumb:window-inactive {background: var(--fwk-primary-light-color);}
.fwk_AppMobile ::-webkit-scrollbar { display: none; }

/************************** RIPPLE EFECT ******************************/
.fwk-ripple_effect { position: absolute; background:rgba(255, 255, 255, 0.3); border-radius: 100%; transform:scale(0); }
.fwk-animate_ripple { animation:fwk-ripple 0.65s linear; }
.fwk-animate_ripple-sm { animation:fwk-ripple-sm 0.45s linear; }
@keyframes fwk-ripple { 100% {opacity: 0; transform: scale(2.5);} }
@keyframes fwk-ripple-sm { 100% {opacity: 0; transform: scale(1);} }

/*********************** FOLDING CUBE LOADING ********************************/
.fwk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: relative; transform: rotateZ(45deg); }
.fwk-folding-cube .fwk-cube { float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1);  }
.fwk-folding-cube .fwk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFFFF; animation: fwk-foldCubeAngle 2.4s infinite linear both; transform-origin: 100% 100%; }
.fwk-folding-cube .fwk-cube2 { transform: scale(1.1) rotateZ(90deg); }
.fwk-folding-cube .fwk-cube3 { transform: scale(1.1) rotateZ(180deg); }
.fwk-folding-cube .fwk-cube4 { transform: scale(1.1) rotateZ(270deg); }
.fwk-folding-cube .fwk-cube2:before { animation-delay: 0.3s; }
.fwk-folding-cube .fwk-cube3:before { animation-delay: 0.6s; }
.fwk-folding-cube .fwk-cube4:before { animation-delay: 0.9s; }
@keyframes fwk-foldCubeAngle { 0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; } }