form fieldset                                             { margin:0; padding:0; border:0; }
    form fieldset.border                                    { padding:20px; border:1px solid #eee; }


    form div.form_row                                       { position:relative; margin:0 0 20px; padding:0; display:inline-block; width:100%; }
    form div.field_container                                { position:relative; margin:0; padding:0; display:inline-block; width:100%; }


    form label                                              { display:block; margin:0 0 4px; padding:0; font-size:16px; font-family:'montserratsemibold', Arial, sans-serif; }
    form label.help                                         ,
    p.help-text                                             { font-size:13px; color:#aaa; margin:5px 0; }
    form label.sub                                          { display:inline-block; margin-left:5px; font-family:'montserratregular', Arial, sans-serif; }
    form label.sub.cbox-label                               { margin-left:0; font-family:'montserratregular', Arial, sans-serif; }
    form label.sub.expanded-label                           { font-size:0.9em; font-family:'montserratregular', Arial, sans-serif;}


    form input:not([type='checkbox']):not([type='radio'])   ,
    .select2-container--traca .select2-selection--single    ,
    form ._select                                           ,
    form .fileinput .display-text                           ,
    form select.multiple                                    ,
    form ._checkbox                                         ,
    form ._radio                                            ,
    form select                                             ,
    form textarea                                           { border:1px solid #d1d5db; background-color:#fff; color:#003e55; margin:0; padding:0 12px; width:100%; line-height:40px; height:40px; font-size:14px; font-family:'Noto Sans', sans-serif; outline:none; -webkit-appearance: none; box-sizing:border-box; border-radius:5px; }

    form select                                             { padding-right:0; height:auto; }

    form textarea                                           { height:520px; resize:none; padding-top:10px; padding-bottom:10px; line-height:20px; }
    form .ck-editor__editable.ck-content                    { min-height:398px; }
    form textarea.short                                     { height:180px; }
    form textarea.very-short                                { height:100px; }



    input[type="checkbox"]                                  ,
    input[type="radio"]                                     { position: absolute; margin: 8px 0 0 16px; }
      input[type="checkbox"] + label                        ,
      input[type="radio"] + label                           { position: relative; padding: 0 0 0 60px; line-height:34px; }
      /* slide-rail */
      input[type="checkbox"] + label:before                 ,
      input[type="radio"] + label:before                    { background: #f7f7f7; border: 1px solid #d1d5db; content: ""; position: absolute; display: block; left: 0; top: 0;  width: 50px; /* x*5 */ height: 30px; /* x*3 */ border-radius: 15px; /* x*2 */ -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; }
      /* slider-blob */
      input[type="checkbox"] + label:after                  ,
      input[type="radio"] + label:after                     { background: #fff; content: ""; position: absolute; display: block; left: 3px; top: 3px; width: 26px; /* x*3 */ height: 26px; /* x*3 */ border-radius: 50%; /* x*2 */ -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; }
      /* cursor hover effect on blob */
      input[type="checkbox"] + label:hover:after            ,
      input[type="radio"] + label:hover:after               { box-shadow: 0 0 5px rgba(0,0,0,0.3); }
      /* slide-rail active effect */
      input[type="checkbox"]:checked + label:before         ,
      input[type="radio"]:checked + label:before            { background:#33a64c; border-color:#33a64c; }
      /* slider blob effect when it's enabled */
      input[type="checkbox"]:checked + label:after          ,
      input[type="radio"]:checked + label:after             { margin-left:20px; }


    form ul.exp-list                                        { list-style:none; margin:0; padding:0; }
      form ul.exp-list li                                   { margin:0; padding:0; }
        form ul.exp-list li label.sub                       { margin-left:0; }


    form ._select                                           { position:relative; overflow:hidden; }
      form ._select a.caret                                 { position:absolute; top:0px; right:0px; width:40px; height:38px; background:#fff; z-index:4;      }
        /*form ._select a.caret:after                         { content:"\f0d7"; font-family:'FontAwesome'; font-size:24px; line-height:37px; color:#7293a0; border-left:1px solid rgba(0,0,0,0.05); position:absolute; top:0px; right:0px; width:100%; height:100%; background:none; text-align:center; }*/
        form ._select a.caret:after                         { content:" "; background-image: url(/images/form-icon-select-bg.svg); background-position: center center; background-repeat: no-repeat; background-size: 14px 7px; line-height:37px; color:#7293a0; border-left:1px solid rgba(0,0,0,0.05); position:absolute; top:0px; right:0px; width:100%; height:100%; text-align:center; }



div.form-errors                                             ,
ul.form-errors                                              { list-style:none; margin:0 0 10px; padding:0; color:#b72020; }
  ul.form-errors li                                         { margin:5px 0; padding:0; line-height:20px; }
    ul.form-errors li:before                                { content:"\f06a"; font-family:'FontAwesome'; float:left; color:#b72020; font-size:1.2em; padding:0; line-height:20px; border-radius:5px; margin-right:5px; }



  form input.datepicker                                     { background-image:url(/images/form-icon-calendar.svg); background-position: calc( 100% - 10px ) center; background-repeat:no-repeat; background-size:22px 22px; }
  form input.timepicker                                     { background-image:url(/images/form-icon-clock.svg); background-position: calc( 100% - 10px ) center; background-repeat:no-repeat; background-size:22px 22px; }

  form .datetimepicker                                      { overflow:hidden; }
    form .datetimepicker ._date input                       { background-image:url(/images/form-icon-calendar.svg); background-position: calc( 100% - 5px ) center; background-repeat:no-repeat; background-size:22px 22px; }
    form .datetimepicker ._time input                       { background-image:url(/images/form-icon-clock.svg); background-position: calc( 100% - 7px ) center; background-repeat:no-repeat; background-size:22px 22px; }

    form .datetimepicker ._date input                       { width:70%; float:left; border-right:0; padding-right:0; }
    form .datetimepicker ._time input                       { width:30%; float:right; border-left:0; padding-left:0; padding-right:40px; text-align:right; }

  .picker__holder button                                    { color:#414141; border-radius:0; }
    .picker__holder .picker__table th                       { text-align:center; }
    .picker__holder .picker__table td                       { text-align:center; }
    .picker__holder .picker__table td                       { text-align:center; }
    .picker__holder .picker__table td                       ,
    .picker__holder .picker__table tr:nth-child(2n) td      { background:#fff; }
    .picker__holder select                                  { line-height:1em; padding:0; width:auto; -webkit-appearance:auto !important; }

    form .collection-container                              { position:relative; overflow:hidden; padding:10px; border:1px solid #d1d5db; background:#fff; color:#003e55; border-radius:10px; }
      form .collection-container .remove                    { background-color:#d40000 !important; color:#fff !important; }
      form .collection-container .remove:hover              { background-color:#970000 !important; color:#fff !important; }
      form .collection-container .inner                     { overflow:hidden; }
      form .collection-container .collection-item           { position:relative; overflow:hidden; margin:0 0 15px 0; padding:20px; border:0; background:#f9f9f9; color:#003e55; border-radius:5px; }
      form .collection-container .collection-item .field    { position:relative; margin:0; padding:0; overflow:hidden; }


  .traca-principle                                          { display:block; width:100%; overflow:hidden; margin:20px 0; }
    .traca-principle input                                  { display:none; }
    .traca-principle label                                  { float:left; text-transform:uppercase; margin:0; padding:0; line-height:30px; font-size:22px; line-height:1.25em; font-family:'montserratregular', Arial, sans-serif; }
    .traca-principle .traca-buttons                         { float:right; list-style:none; margin:0; padding:0; }
      .traca-principle .traca-buttons li                    { float:left; margin:0 0 0 15px; padding:0; }

        .traca-principle .traca-buttons li a                { border:2px solid #ddd; display:inline-block; padding:3px 30px; background:#ddd; text-transform:uppercase; text-decoration:none; line-height:30px; font-size:18px; border-radius:3px; color:#000; box-sizing:border-box; position:relative; text-align:center; }

        .traca-principle .traca-buttons li a.correct        { background-color:#47b764; border-color:#47b764; }
        .traca-principle .traca-buttons li a.incorrect      { background-color:#d5464f; border-color:#d5464f; }

        .traca-principle .traca-buttons li a:hover          { color:#000; text-decoration:none; }
        .traca-principle .traca-buttons li a.correct:hover  { background-color:#54d575; border-color:#54d575; }
        .traca-principle .traca-buttons li a.incorrect:hover{ background-color:#fe6d76; border-color:#fe6d76; }

        .traca-principle .traca-buttons li a.active           {  }
        .traca-principle .traca-buttons li a.correct.active   { background-color:#54d575; border-color:#54d575; color:rgba(0,0,0,0.25); }
        .traca-principle .traca-buttons li a.incorrect.active { background-color:#fe6d76; border-color:#fe6d76; color:rgba(0,0,0,0.25); }

          .traca-principle .traca-buttons li a.active:before  { content:" "; background-position:center center; background-repeat:no-repeat; background-size:36px 36px; width:36px; height:36px; position:absolute; top:0px; left:50%; margin-left:-18px; }
          .traca-principle .traca-buttons li a.correct.active:before   { background-image:url(../images/icon-check.svg); }
          .traca-principle .traca-buttons li a.incorrect.active:before { background-image:url(../images/icon-cross.svg); }

  form.traca-form-disabled .traca-principle .traca-buttons li a         { display:none; }
  form.traca-form-disabled .traca-principle .traca-buttons li a.active  { display:inherit; }

  form .form_row.traca-comments                             { background:#ddd; padding:30px 30px 30px; border-radius: 10px; }
    form .form_row.traca-comments label                     { color:#fff; }
    form .form_row.traca-comments textarea.focused          { border-color:#000; }
    form .form_row.traca-comments .help-text                { display:none; }
    form .form_row.traca-comments.traca-correct             { background-color:#54d575; }
    form .form_row.traca-comments.traca-incorrect           { background-color:#fe6d76; }



@media only screen and (min-width: 768px) and (max-width: 1023px) {


}


@media only screen and (max-width: 767px) {

  .traca-principle .traca-buttons                           { width:100%; }
    .traca-principle .traca-buttons li                      { width:50%; padding:0; margin:0; }
      .traca-principle .traca-buttons li a                  { width:95%; }
      .traca-principle .traca-buttons li a.incorrect        { float:right; }

}

@media only screen and (max-width: 479px) {

  .traca-principle .traca-buttons                           { width:100%; }
    .traca-principle .traca-buttons li                      { width:100%; padding:0; margin:2px 0; }
      .traca-principle .traca-buttons li a                  { width:100%; }

}