html, body { color: #6d727c; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 16px; margin: 0; padding: 0; position: relative; }
body { background-color: #eef2f8; padding-top: 61px; right: 0px; }


* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; }
/* Para remover highlight outline in android mobiles */
:after, :before { box-sizing: border-box; }

b { font-weight: 700; }
a { color: inherit; cursor: pointer; text-decoration: none; }
ul { list-style:  none; margin: 0; padding: 0; }

.color_primary { color: #004e9e; }

.container { margin: auto; max-width: 1020px; }


#overbody { background-color: rgba(0,0,0,0.1); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1998; }
headertag { background: #fff; border-bottom: 1px solid #e4ebf5; color: #6d727c; display: block; height: 61px; padding: 0 15px; position: fixed; right: 0; top: 0px; width: 100%; z-index: 999; }
sidemenu { background-color: #fff; bottom: 0; display: block; position: fixed; right: -200px; top: 0; width: 200px; z-index: 1999;
}

body, headertag, sidemenu {
  -webkit-transition: right 0.4s ease-out;
  transition: right 0.4s ease-out;
}

body.openmenu { right: 200px; width: 100%; }
body.openmenu #overbody { display: block; }
body.openmenu headertag { right: 200px; }
body.openmenu sidemenu { box-shadow: -1px 0px 4px 1px rgba(128, 128, 128, 0.4); right: 0px; }

main { display: block; padding: 20px 15px;}

#ulfaq li { background-color: #fff; border: none; box-shadow: 0 1px 2px rgba(0,0,0,.1); display: inline-block; margin-bottom: 20px; max-height: 100px; min-height: 50px; overflow: hidden; padding: 15px 15px 15px; vertical-align: top; width: 100%;
  -webkit-transition: max-height 0.5s ease-out;
  transition: max-height 0.5s ease-out;
}

#ulfaq li:hover { box-shadow: 0 5px 10px rgba(0,0,0,.2); }
/* #ulfaq li:nth-child(2n+1) { margin-right: 1%; }
#ulfaq li:nth-child(2n) { margin-left: 1%; } */
a.afaq { color: #353e4e; display: block; font-size: 18px; font-weight: 300; padding-left: 15px; position: relative; }
a.afaq:before { border: 8px solid transparent; border-left-color: #ff9e3f; border-left-width: 10px; border-right-width: 0px; content: ""; left: 0px; position: absolute; top: 2px; }
#ulfaq li.current a.afaq::before { border-left-color: #ff9e3f; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.box_faq { color: #6d727c; display: none; font-size: 15px; line-height: 1.5; padding: 20px 0px 0px; }
#ulfaq li.current .box_faq { display: block; }
.box_faq a[href] { color: #02aeff; }
.box_faq a[href]:hover { text-decoration: underline; }

#ulfaq li.current { max-height: 1500px; padding: 15px 15px 25px; }

@media all and (max-width: 660px) {
  /* #ulfaq li { margin-bottom: 20px; width: 100%; }
  #ulfaq li:nth-child(2n+1) { margin-right: 0%; }
  #ulfaq li:nth-child(2n) { margin-left: 0%; } */
}


/********************************************************************************************************/
.tutorial_title { color: #303135; }

.content_video_embeded {
  margin: 15px auto;
  max-width: 720px;
}

#ulfaq li .content_video_embeded {
  display: none;
  max-width: 720px;
}

#ulfaq li.current .content_video_embeded {
  display: block;
}

.video_embeded {
  border: 5px solid #fff;
  box-shadow: 0 4px 10px 3px rgba(0,0,0,.2);
  height: 0px !important;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

#ulfaq li.current .video_embeded {
  border: 5px solid #ccc;
  box-shadow: none;
}

.video_embeded>iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.btn { border-radius: 3px; font-family: inherit; font-size: 100%; padding: .5em 1em; }
.btn:hover {
  background-image: -webkit-gradient(linear,left top, left bottom,from(transparent),color-stop(40%, rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
  background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}

._noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently*/
}

._siselect {-webkit-touch-callout: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.h1, .h2, .h3, h1, h2, h3, p { margin-top: 0px; margin-bottom: 15px; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: #353e4e; font-family: inherit; font-weight: 600; line-height: 1.4; }
.h1, h1 { font-size: 2rem; }
.h2, h2 { font-size: 1.5rem; }
.h3, h3 { font-size: 1.25rem; }

.center { text-align: center;}

/*._bg_error { background-color: #D6523C !important; }
._bg_error:hover { background-color: #D6523C !important; }*/
._bg_success { background-color: #26A65B !important; }
._bg_success:hover { background-color: #27B562 !important; }
/*._bg_success { background-color: #8bc34a !important; }
._bg_success:hover { background-color: #7cb342 !important; }*/
._bg_alert { background-color: #F57C00 !important; }
._bg_alert:hover { background-color: #F57C00 !important; }
._bg_error { background-color: #ed5e68 !important; }
._bg_error:hover { background-color: #ed5e68 !important; }
._bg_cancel { background-color: #a7a7a7 !important; }
._bg_cancel:hover { background-color: #a7a7a7 !important; }
._bg_common { background: #f5f7fa; }
._bg_common_1 { background: #f9f5f8 }

.btn._disable { opacity: 0.6; }

._bg_sz_cover { background-size: cover; }

._c_link      { color: #00B7FF; }
._c_w         { color: white; }
._c_gray      { color: #767173; }
._c_graylight { color: #a9a9a9; }
._c_blue      { color: #4e69a2; }
._c_inh       { color: inherit; }

._clearfix { overflow: auto; zoom: 1; }
._cur_p { cursor: pointer; }
._d_ib { display: inline-block; }
._d_none { display: none !important; }
._disable { cursor: default; pointer-events: none; }
._error { color: #D6523C; }
._float_l { float: left; }
._float_r { float: right; }
._fs_it { font-style: italic; }
._fw_bold { font-weight: bold; }
._fw_normal { font-weight: normal; }
._fz18 { font-size: 18px !important; }
._fz15 { font-size: 15px !important; }
._fz14 { font-size: 14px !important; }
._fz13 { font-size: 13px !important; }
._fz12 { font-size: 12px !important; }
._fz11 { font-size: 11px !important; }
._fz75 { font-size: 75%; }
._fz80 { font-size: 80%; }
._fz85 { font-size: 85%; }
._fz90 { font-size: 90%; }
._fz95 { font-size: 95%; }
._fz100 { font-size: 100%; }
._fz105 { font-size: 105%; }
._fz110 { font-size: 110%; }
._fz115 { font-size: 115%; }
._fz120 { font-size: 120%; }
._fz125 { font-size: 125%; }
._fz130 { font-size: 130%; }
._fz135 { font-size: 135%; }
._fz140 { font-size: 140%; }
._fz150 { font-size: 150%; }
._fz_lg { font-size: 1.33em; }
._l_1b_b { border-bottom: 1px solid rgba(0,0,0,0.09); height: 1px; }
._lh_16 { line-height: 1.6; }
._lh_15 { line-height: 1.5; }
._lh_14 { line-height: 1.4; }
._lh_13 { line-height: 1.3; }
._lh_12 { line-height: 1.2; }
._lh_11 { line-height: 1.1; }
._lh_10 { line-height: 1.0; }
._lh_08 { line-height: 0.8; }
._lh_07 { line-height: 0.7; }
._lh_05 { line-height: 0.5; }
._lh_02 { line-height: 0.2; }
._lh_00 { line-height: 0.0; }

._maxw_90p { max-width: 90%; }
._maxw_960 { max-width: 960px; }
._maxw_900 { max-width: 900px; }
._maxw_800 { max-width: 800px; }
._maxw_750 { max-width: 750px; }
._maxw_700 { max-width: 700px; }
._maxw_600 { max-width: 600px; }
._maxw_500 { max-width: 500px; }
._maxw_400 { max-width: 400px; }
._maxw_350 { max-width: 350px; }
._maxw_300 { max-width: 300px; }
._maxw_250 { max-width: 250px; }
._maxw_200 { max-width: 200px; }
._maxw_180 { max-width: 180px; }
._maxw_150 { max-width: 150px; }
._maxw_120 { max-width: 120px; }
._maxw_100 { max-width: 100px; }
._maxw_70 { max-width: 70px; }
._maxw_50 { max-width: 50px; }
._minw_350 { min-width: 350px; }
._minw_300 { min-width: 300px; }
._minw_250 { min-width: 250px; }
._minw_200 { min-width: 200px; }
._minw_180 { min-width: 180px; }
._minw_150 { min-width: 150px; }
._minw_140 { min-width: 140px; }
._minw_120 { min-width: 120px; }
._minw_100 { min-width: 100px; }
._minw_50 { min-width: 50px; }
._minw_100pc { min-width: 100%; }

._mg_auto { margin: auto; }
._mg_l2 { margin-left: 2px; }
._mg_l4 { margin-left: 4px; }
._mg_l6 { margin-left: 6px; }
._mg_l8 { margin-left: 8px; }
._mg_l10 { margin-left: 10px; }
._mg_l15 { margin-left: 15px; }
._mg_r2 { margin-right: 2px; }
._mg_r4 { margin-right: 4px; }
._mg_r6 { margin-right: 6px; }
._mg_r8 { margin-right: 8px; }
._mg_r10 { margin-right: 10px; }
._mg_r15 { margin-right: 15px; }
._ovf_hid { overflow: hidden; }
._p4_0_5 { padding: 0 5px; }
._p4_0_10 { padding: 0 10px; }
._p4_0_15 { padding: 0 15px; }
._p4_0_20 { padding: 0 20px; }
._p4_3 { padding: 3px; }
._p4_3_0 { padding: 3px 0; }
._p4_3_5 { padding: 3px 5px; }
._p4_3_10 { padding: 3px 10px; }
._p4_5 { padding: 5px; }
._p4_5_0 { padding: 5px 0; }
._p4_5_3 { padding: 5px 3px; }
._p4_5_10 { padding: 5px 10px; }
._p4_5_15 { padding: 5px 15px; }
._p4_5_20 { padding: 5px 20px; }
._p4_10 { padding: 10px; }
._p4_10_0 { padding: 10px 0; }
._p4_10_5 { padding: 10px 5px; }
._p4_10_15 { padding: 10px 15px; }
._p4_10_20 { padding: 10px 20px; }
._p4_12 { padding: 12px; }
._p4_12_0 { padding: 12px 0; }
._p4_12_5 { padding: 12px 5px; }
._p4_12_10 { padding: 12px 10px; }
._p4_15 { padding: 15px; }
._p4_15_0 { padding: 15px 0; }
._p4_15_5 { padding: 15px 5px; }
._p4_15_10 { padding: 15px 10px; }
._p4_20 { padding: 20px; }
._p4_20_0 { padding: 20px 0px; }
._p4_20_5 { padding: 20px 5px; }
._p4_20_10 { padding: 20px 10px; }
._p4_20_15 { padding: 20px 15px; }
._p4_30 { padding: 30px; }
._p4_30_0 { padding: 30px 0px; }
._p4_30_10 { padding: 30px 10px; }
._p4_30_15 { padding: 30px 15px; }
._p4_30_20 { padding: 30px 20px; }
._pos_fx { position: fixed !important; }
._pos_re { position: relative; }
._pos_abs { position: absolute; }
._sphelp { display: inline-block; height: 100%; overflow: hidden; vertical-align: middle; width: 0 !important; }
._success { color: #26A65B; }
._ta_r { text-align: right; }
._ta_l { text-align: left; }
._to_ell { text-overflow: ellipsis; }
._txd_lt { text-decoration: line-through; }
._txd_u { text-decoration: underline; }
._txd_u_h:hover { text-decoration: underline; }
._txd_lt { text-decoration: line-through; }
._txtt_u { text-transform: uppercase; }
._va_bot { vertical-align: bottom; }
._va_m { vertical-align: middle; }
._va_top { vertical-align: top; }
._w_100pc { width: 100%; }
._wb_bw { word-break: break-word; }
._wr_bw { word-wrap: break-word;}
._whs_now { white-space: nowrap; }
._whs_nor { white-space: normal; }

input, select, textarea { background-color: white; -webkit-user-select: text;  }

input[type="text"],input[type="url"],input[type="number"],input[type="email"],input[type="password"], select, textarea { border: 1px solid #d8d8d8; border-radius: 3px; color: #4c4c4c; font-family: sans-serif; font-size: 1em; height: 40px; line-height: 1.5em; max-width: 400px; min-width: 150px; outline: none; padding: 6px 8px; width: 100%; }

input, select { background-image: none; text-rendering: auto; text-transform: none; /*-webkit-appearance: none;*/ -webkit-border-image: none; }

::-webkit-input-placeholder { color: #8e8e8e; font-size: 95%; opacity: 1;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

::-moz-placeholder { color: #8e8e8e; font-size: 95%; opacity: 1;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

:-ms-input-placeholder { color: #8e8e8e; font-size: 95%; opacity: 1;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

::-ms-input-placeholder { color: #8e8e8e; font-size: 95%; opacity: 1;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

::placeholder { color: #8e8e8e; font-size: 95%; opacity: 1;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
::-moz-placeholder{ color:#999; opacity:1;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
::-ms-input-placeholder{ color:#999;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
::-webkit-input-placeholder{ color:#999;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
/*
FOR INPUT MATERIAL DESIGN
REF: https://scotch.io/tutorials/google-material-design-input-boxes-in-css3
*/

.select_wrap { border: 1px solid #d8d8d8; border-radius: 3px; display: inline-block; max-width: 400px; min-width: 150px; position: relative; }

.select_wrap select { background: transparent; border: none; display: block; margin: 0; outline: none; padding: 8px 30px 8px 15px; position: relative; width: 100%; z-index: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
          appearance: none;
}

.select_wrap>i { position: absolute; right: 6px; top: 22%; }


textarea { min-height: 8em; overflow: auto; }
.g-recaptcha { display: inline-block; margin: 0 auto; }
input[type="number"] { max-width: 250px; min-width: 60px; }
input:-moz-read-only { cursor: no-drop; }
input:read-only {  cursor: no-drop; }

.select_wrap.input_bardown { border: none; display: block; max-width: 100%; }
.input_bardown { line-height: 0; position: relative; }
.input_bardown > input, .input_bardown > select { background-color: transparent; border: none; max-width: 100%;
  -webkit-transition: none;
          transition: none;
}
.input_bardown>div { border-bottom: 1px solid; border-color: rgb(178, 187, 193,1); bottom: 0; display:inline-block; height: 0px; left: 0; position:absolute; width:100%;  }
.input_bardown>div::before, .input_bardown>div::after {
  background-color: #5264AE;
  bottom: -1px;
  content: '';
  height: 2px;
  position: absolute;
  width: 0;
}

.input_bardown > div, .input_bardown>div::before, .input_bardown>div::after {
  -webkit-transition: all .2s ease;
          transition: all .2s ease;
}

.input_bardown>div::before { left: 50%; }
.input_bardown>div::after { right: 50%; }
.input_bardown>input:focus ~ div { border-color: rgb(178, 187, 193,0); }
.input_bardown>input:focus ~ div::before, .input_bardown>input:focus ~ div::after {
  width: 50%;
}

.input_bardown>select:focus ~ div { border-color: rgba(175,175,175,0); }
.input_bardown>select:focus ~ div::before, .input_bardown>select:focus ~ div::after {
  width: 50%;
}