/* Adas Document */
/* ----------------------------------------- */
/*  Form Style                               */
/* ----------------------------------------- */

body {
  /*font-family: 'Open Sans', sans-serif;*/
}
/*
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
*/
input, button, select, textarea {
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
}

/* Grid Layout corpinfo */
#view1-vcia {
    display: grid;
  	grid-template-columns: minmax(450px, 50%) minmax(450px, 50%);
  	grid-template-rows: auto auto;
    grid-gap: .8em .5em; 
    margin:0;
    padding:0;
}

.view_2col {
    display: grid;
  	grid-template-columns: minmax(450px, 50%) minmax(450px, 50%);
  	grid-template-rows: auto auto;
    grid-gap: .8em .5em; 
    margin:0;
    padding:0;
}

/* Grid Layout form */
.formarea form {
    display: grid;
    grid-template-areas: 
      "c01-title c01-title"
      "c01-01 c01-02"
      "c02-title c02-title"
      "c02-01 c02-02"
      "c03-title c04-title"
      "c03-01 c04-01";
    /*grid-template-columns: repeat(auto, minmax(420px, 1fr));*/
  	grid-template-columns: minmax(450px, 50%) minmax(450px, 50%);
  	grid-template-rows: auto auto;
    grid-gap: .8em .5em;
    margin:0;
}
fieldset {
    border: 0;
    padding: 0;
}
#c01-title { grid-area: c01-title; }
#c01-01 { grid-area: c01-01; }
#c01-02 { grid-area: c01-02; }
#c02-title { grid-area: c02-title; }
#c02-01 { grid-area: c02-01; }
#c02-02 { grid-area: c02-02; }
#c03-title { grid-area: c03-title; }
#c03-01 { grid-area: c03-01; }
#c04-title { grid-area: c04-title; }
#c04-01 { grid-area: c04-01; }
#c05-title { grid-area: c05-title; }
#c05-01 { grid-area: c05-01; }

fieldset legend {
    display: block;
    width:100%;
	font-size:1.25em;
    font-weight:bold;
	letter-spacing:3px;
	margin:5px 0 3px 0;
	padding:3px 0 3px 5px;
}
#view1 fieldset legend {
    color:#1D3B55;
    /*border-top:2px solid #1D3B55;*/
	background:#B9D6ED url(../material/back_img_table1.png) left top repeat;
}
#view2 fieldset legend {
    color:#0F2D1E;
	background:#CDE7E5 url(../material/back_img_table1.png) left top repeat;
}

/* form block */
.formblock { 
    display: block;
    margin:0 8px 0 16px;
    padding: 20px 0 4px 0;
    width: auto;
    min-height: 48px;
    position: relative;
}
/* input radio % checkbox label */
.formblock label.itemlabel {
    display: block;
    font-size:0.9em;
    /*color: rgba(0,0,0,0.67);*/
    color:#1A4C82;
    margin-bottom:10px;
}
.formblock label.itemlabel ~ .status {
    font-size:1.06em;
    color:#175812;
    padding-bottom:5px;
}

/* entered label for em */
.entered > label {
    position: absolute;
    top: 6px;
    font-size: 0.9em;
    color:#1A4C82;
}

.formblock em, .formblock input, .formblock textarea, .formblock select {
    outline: 0;
    border: 0;
    display: block;
    font-family: 'Open Sans', sans-serif;  
}
/*.formblock select:hover {
    background:#EAF4FB;
}*/
.tableblock td,
.entered em,
.formblock input[type="text"],
.formblock input[type="tel"],
.formblock input[type="number"],
.formblock input[type="email"],
.formblock input[type="password"],
.formblock input[type="date"],
.formblock input[type="month"],
.formblock input[type="datetime-local"],
.formblock textarea,
.formblock select {
    width: 100%;
    height:22px;
    margin:0;
    padding: 10px 0 5px 0;
    line-height:1.05em;
    font-size: 1.2em;
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0.67);
    border-bottom: 1px solid rgba(0,0,0,0.4);
}
/* sel table block */
.tableblock {
    width:95%;
    margin:0 8px 0 16px;
}
.tableblock td {
    font-family: 'Open Sans', sans-serif; 
    width:auto;
    height:auto;
    vertical-align: middle;
}
.entered em {
    height:auto;
    min-height:22px;
    padding-top:6px;
    padding-bottom:8px;
    font-style:normal;
    border-bottom:inherit;
    background-color: #fff;
    line-height:1.45em;
    text-align: left;
    /*border-bottom:1px solid #333;*/
}
.entered img {
    margin-top:5px;
}
.formblock textarea {
    resize: none;
    outline: none;
    overflow: hidden;
    line-height:1.3em;
    /*padding: 6px 0 7px 0;*/
    /*height:24px;*/
    height:1.3em;
    font-family: 'Open Sans', sans-serif;
    vertical-align:bottom;
}
.formblock select {
    height:38px;
    padding: 6px 0 5px 0;
}
.formblock input[type="file"] {
	opacity: 0;
}

.formblock .bar {
    position: relative;
    display: block;
    width:100%;
    height: 2px;
    /*background: #2196f3;*/
}
.formblock .bar:before, .formblock .bar:after {
	content: '';
    position: absolute;
    bottom: 1px;
    width: 0;
	height: 2px;
	background: #2196f3;
	transition: 0.2s ease all;
}

.formblock .bar:before {
	left: 50%;
}
.formblock .bar:after {
	right: 50%;
}
.formblock input[type="text"]:focus ~ .bar:before, .formblock input[type="text"]:focus ~ .bar:after,
.formblock input[type="tel"]:focus ~ .bar:before, .formblock input[type="tel"]:focus ~ .bar:after,
.formblock input[type="number"]:focus ~ .bar:before, .formblock input[type="number"]:focus ~ .bar:after,
.formblock input[type="email"]:focus ~ .bar:before, .formblock input[type="email"]:focus ~ .bar:after,
.formblock input[type="password"]:focus ~ .bar:before, .formblock input[type="password"]:focus ~ .bar:after,
.formblock input[type="month"]:focus ~ .bar:before, .formblock input[type="month"]:focus ~ .bar:after,
.formblock input[type="date"]:focus ~ .bar:before, .formblock input[type="date"]:focus ~ .bar:after,
.formblock input[type="datetime-local"]:focus ~ .bar:before, .formblock input[type="datetime-local"]:focus ~ .bar:after,
.formblock textarea:focus ~ .bar:before, .formblock textarea:focus ~ .bar:after,
.formblock select:focus ~ .bar:before, .formblock select:focus ~ .bar:after {
	width: 50%;
}

.formblock input[type="text"]:disabled,
.formblock input[type="tel"]:disabled,
.formblock input[type="number"]:disabled,
.formblock input[type="email"]:disabled,
.formblock input[type="password"]:disabled,
.formblock input[type="date"]:disabled,
.formblock textarea:disabled,
.formblock select:disabled {
    border-bottom: 2px dotted rgba(0,0,0,0.4);
}
.formblock input[type="text"]:disabled ~ label,
.formblock input[type="tel"]:disabled ~ label,
.formblock input[type="number"]:disabled ~ label,
.formblock input[type="email"]:disabled ~ label,
.formblock input[type="password"]:disabled ~ label,
.formblock input[type="date"]:disabled,
.formblock textarea:disabled ~ label,
.formblock select:disabled ~ label {
    color: rgba(0,0,0,0.4);
}
.formblock input[type="text"] ~ label,
.formblock input[type="tel"] ~ label,
.formblock input[type="number"] ~ label,
.formblock input[type="email"] ~ label,
.formblock input[type="password"] ~ label,
.formblock input[type="month"] ~ label,
.formblock input[type="date"] ~ label,
.formblock input[type="datetime-local"] ~ label,
.formblock textarea ~ label,
.formblock select ~ label {
    font-size: 1.1em;
    color: rgba(0,0,0,0.67);
    display: block;
    position: absolute;
    top: 26px;
    left: 0px;
    pointer-events: none;
    transition: all 0.2s;
}
.formblock input[type="text"] ~ .status,
.formblock input[type="tel"] ~ .status,
.formblock input[type="number"] ~ .status,
.formblock input[type="email"] ~ .status,
.formblock input[type="password"] ~ .status,
.formblock input[type="month"] ~ .status,
.formblock input[type="date"] ~ .status,
.formblock input[type="datetime-local"] ~ .status,
.formblock textarea ~ .status,
.formblock select ~ .status {
    width:100%;
    position: absolute;
    bottom: -8px;
    left: 0;
    color: rgba(0,0,0,0);
    font-size: 0.9em;
    pointer-events: none;
    transition: all 0.2s;
}
.formblock textarea ~ .status {
    bottom: -11px;
}
.formblock input[type="text"]:focus ~ .status,
.formblock input[type="tel"]:focus ~ .status,
.formblock input[type="number"]:focus ~ .status,
.formblock input[type="email"]:focus ~ .status,
.formblock input[type="password"]:focus ~ .status,
.formblock input[type="month"]:focus ~ .status,
.formblock input[type="date"]:focus ~ .status,
.formblock input[type="datetime-local"]:focus ~ .status,
.formblock textarea:focus ~ .status,
.formblock select:focus ~ .status {
    color:rgba(150,150,150,150);
}
/*
.formblock input[type="text"] ~ .status:before,
.formblock input[type="tel"] ~ .status:before,
.formblock input[type="number"] ~ .status:before,
.formblock input[type="email"] ~ .status:before,
.formblock input[type="password"] ~ .status:before,
.formblock textarea ~ .status:before,
.formblock select ~ .status:before {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #2196f3;
    position: absolute;
    top: -3px;
    left: 0;
    margin-left: 50%;
    visibility: visible;
    transition: all 0.2s;
}
*/
.formblock input[type="text"]:not([value=""]) ~ label,
.formblock input[type="tel"]:not([value=""]) ~ label,
.formblock input[type="number"]:not([value=""]) ~ label,
.formblock input[type="email"]:not([value=""]) ~ label,
.formblock input[type="password"]:not([value=""]) ~ label,
.formblock input[type="month"] ~ label,
.formblock input[type="date"] ~ label,
.formblock input[type="datetime-local"] ~ label,
.formblock textarea:not([value=""]) ~ label,
.formblock select:not([value=""]) ~ label {
    font-size: 0.9em;
    top: 6px;
    color:#1A4C82;
}
.formblock input[type="text"]:focus ~ label,
.formblock input[type="tel"]:focus ~ label,
.formblock input[type="number"]:focus ~ label,
.formblock input[type="email"]:focus ~ label,
.formblock input[type="password"]:focus ~ label,
.formblock input[type="month"]:focus ~ label,
.formblock input[type="date"]:focus ~ label,
.formblock input[type="datetime-local"]:focus ~ label,
.formblock textarea:focus ~ label,
.formblock select:focus ~ label {
    font-size: 0.9em;
    top: 6px;
    color:#2196f3;
}
/*
.formblock input[type="text"]:focus ~ .status:before,
.formblock input[type="tel"]:focus ~ .status:before,
.formblock input[type="number"]:focus ~ .status:before,
.formblock input[type="email"]:focus ~ .status:before,
.formblock input[type="password"]:focus ~ .status:before,
.formblock input[type="datetime-local"]:focus ~ .status:before,
.formblock textarea:focus ~ .status:before,
.formblock select:focus ~ .status:before {
    width: 100%;
    margin: 0;
}
*/
/*.formblock input[type="text"]:invalid:not(:focus):not([value=""]) ~ .status,
.formblock input[type="tel"]:invalid:not(:focus):not([value=""]) ~ .status,
.formblock input[type="number"]:invalid:not(:focus):not([value=""]) ~ .status,
.formblock input[type="email"]:invalid:not(:focus):not([value=""]) ~ .status,
.formblock input[type="password"]:invalid:not(:focus):not([value=""]) ~ .status,
.formblock input[type="datetime-local"]:invalid:not(:focus):not([value=""]) ~ .status,
.formblock textarea:invalid:not(:focus):not([value=""]) ~ .status,
.formblock select:invalid:not(:focus):not([value=""]) ~ .status {
    color: #f44336;
}
*/
/*
.formblock input[type="text"]:invalid:not(:focus):not([value=""]) ~ .status:before,
.formblock input[type="tel"]:invalid:not(:focus):not([value=""]) ~ .status:before,
.formblock input[type="number"]:invalid:not(:focus):not([value=""]) ~ .status:before,
.formblock input[type="email"]:invalid:not(:focus):not([value=""]) ~ .status:before,
.formblock input[type="password"]:invalid:not(:focus):not([value=""]) ~ .status:before,
.formblock textarea:invalid:not(:focus):not([value=""]) ~ .status:before,
.formblock select:invalid:not(:focus):not([value=""]) ~ .status:before {
    margin: 0;
    width: 98%;
    background: #f44336;
}*/
/*
.formblock input[type="text"]:invalid:not(:focus):not([value=""]),
.formblock input[type="tel"]:invalid:not(:focus):not([value=""]),
.formblock input[type="number"]:invalid:not(:focus):not([value=""]),
.formblock input[type="email"]:invalid:not(:focus):not([value=""]),
.formblock input[type="password"]:invalid:not(:focus):not([value=""]),
.formblock input[type="datetime-local"]:invalid:not(:focus):not([value=""]),
.formblock textarea:invalid:not(:focus):not([value=""]),
.formblock select:invalid:not(:focus):not([value=""]) {
    width: 98%;
    border-bottom: 2px solid #f44336;
}
*/
/*
.formblock input[type="text"]:valid:not(:focus) ~ .status:before,
.formblock input[type="tel"]:valid:not(:focus) ~ .status:before,
.formblock input[type="number"]:valid:not(:focus) ~ .status:before,
.formblock input[type="email"]:valid:not(:focus) ~ .status:before,
.formblock input[type="password"]:valid:not(:focus) ~ .status:before,
.formblock input[type="datetime-local"]:valid:not(:focus) ~ .status:before,
.formblock textarea:valid:not(:focus) ~ .status:before {
    margin: 0;
    width: 100%;
    background: #4caf50;
}
*/
.formblock .info {
    position: absolute;
    top: 30px;
    right: 34px;
    width: 30px;
    height: 24px;
    text-align: right;
}
/*
.formblock input[type="text"] ~ .info,
.formblock input[type="tel"] ~ .info,
.formblock input[type="number"] ~ .info,
.formblock input[type="email"] ~ .info,
.formblock input[type="password"] ~ .info,
.formblock textarea ~ .info {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 24px;
    height: 24px;
    margin: 8px -16px 8px 8px;
    padding: 0 16px 0 0;
    border-radius: 100%;
    color: rgba(0,0,0,0.67);
    cursor: pointer;
    transition: all 0.2s;
}
.formblock input[type="text"] ~ .info .tooltip,
.formblock input[type="tel"] ~ .info .tooltip,
.formblock input[type="number"] ~ .info .tooltip,
.formblock input[type="email"] ~ .info .tooltip,
.formblock input[type="password"] ~ .info .tooltip,
.formblock textarea ~ .info .tooltip {
    width: auto;
    max-width: 230px;
    position: absolute;
    top: -6px;
    left:-260px;
    transform: translateX(0%) scale(0.8);
    background: rgba(0,0,0,0.9);
    color: rgba(255,255,255,0.9);
    padding: 2px 8px;
    border-radius: 2px;
    white-space: pre;
    font-size: 0.9em;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}

.formblock input[type="text"] ~ .info .tooltip:before,
.formblock input[type="tel"] ~ .info .tooltip:before,
.formblock input[type="number"] ~ .info .tooltip:before,
.formblock input[type="email"] ~ .info .tooltip:before,
.formblock input[type="password"] ~ .info .tooltip:before,
.formblock textarea ~ .info .tooltip:before {
    content: '';
    display: block;
    position: absolute;
    top: 9px;
    left:246px;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent rgba(0,0,0,0.9);
    z-index: -1;
}
.formblock input[type="text"] ~ .info:hover,
.formblock input[type="tel"] ~ .info:hover,
.formblock input[type="number"] ~ .info:hover,
.formblock input[type="email"] ~ .info:hover,
.formblock input[type="password"] ~ .info:hover,
.formblock textarea ~ .info:hover {
    color: rgba(0,0,0,0.9);
}
.formblock input[type="text"] ~ .info:hover .tooltip,
.formblock input[type="tel"] ~ .info:hover .tooltip,
.formblock input[type="number"] ~ .info:hover .tooltip,
.formblock input[type="email"] ~ .info:hover .tooltip,
.formblock input[type="password"] ~ .info:hover .tooltip,
.formblock textarea ~ .info:hover .tooltip,
.tooltip:hover {
    visibility: visible;
    opacity: 1;
    right: 0;
    transform: translateX(0%);
}
.formblock input[type="text"]:disabled ~ .info,
.formblock input[type="tel"]:disabled ~ .info,
.formblock input[type="number"]:disabled ~ .info,
.formblock input[type="email"]:disabled ~ .info,
.formblock input[type="password"]:disabled ~ .info {
    color: rgba(0,0,0,0.4);
}
.formblock input[type="text"]:disabled ~ .info .tooltip,
.formblock input[type="tel"]:disabled ~ .info .tooltip,
.formblock input[type="number"]:disabled ~ .info .tooltip,
.formblock input[type="email"]:disabled ~ .info .tooltip,
.formblock input[type="password"]:disabled ~ .info .tooltip {
    background: rgba(0,0,0,0.67);
}
.formblock input[type="text"]:disabled ~ .info .tooltip:before,
.formblock input[type="tel"]:disabled ~ .info .tooltip:before,
.formblock input[type="number"]:disabled ~ .info .tooltip:before,
.formblock input[type="email"]:disabled ~ .info .tooltip:before,
.formblock input[type="password"]:disabled ~ .info .tooltip:before {
    border-color: transparent rgba(0,0,0,0.67) transparent transparent;
}
.formblock input[type="text"]:disabled ~ .info:hover,
.formblock input[type="tel"]:disabled ~ .info:hover,
.formblock input[type="number"]:disabled ~ .info:hover,
.formblock input[type="email"]:disabled ~ .info:hover,
.formblock input[type="password"]:disabled ~ .info:hover {
    color: rgba(0,0,0,0.67);
}
*/

/* -------------------------------- */

.control-group {
    display: inline-block;
    vertical-align: top;
    background: #fff;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    padding: 30px;
    width: 200px;
    height: 210px;
    margin: 10px;
}
.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 1.1em;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
}
.control--radio .control__indicator {
    border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #ccc;
}
.control:hover {
    color:#2196f3;
}
.control input:checked ~ .control__indicator {
    background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    /*background: #0e647d;*/
    background: #2196f3;
}
.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}
.select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}
.select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #e6e6e6;
    color: #7b7b7b;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.select select::-ms-expand {
    display: none;
}
.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc;
}
.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
    border-top-color: #000;
}
.select select:disabled ~ .select__arrow {
    border-top-color: #ccc;
}

/* -------------------------------- */

/* file upload */

.fileupload {
    margin-bottom:10px;
}
.file-btn {
    display: block;
    width:98%;
    marign:0;
    padding: 8px 0 8px 12px;
    border-radius: 5px;
    color:#246AB4;
    border:1px solid #3498DB;
    background:#EEF5FD;
    /*background: #3498DB;*/
    cursor: pointer;
    font-size:1.08em;
}
.file-btn:hover {
    color: #fff;
    background:#2196f3;
	transition: 0.2s ease all;
}
.file-btn input {
    display: none;
}
/* file list */
.list-fileupload {
    width:96%;
    /* margin:0 10px 0 25px; */
    margin:0 0 0 10px;
}
.list-fileupload td {
    font-family: 'Open Sans', sans-serif;
    border-bottom:1px dashed #999;
}
.list-fileupload td a {
    font-weight:normal;
}

.fileupblock {
    padding:12px 0;
}

/* -------------------------------- */

/* select botton */
.select_btn {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 32px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 9;
}
/*
.select_btn:after {
  border-top: 8px solid black;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
*/