@font-face {
    font-family: "Rockwell";
    src: url(./../fonts/Rockwell-Bold.woff2) format("woff2"),
        url(./../fonts/Rockwell-Bold.woff) format("woff"),
        url(./../fonts/Rockwell-Bold.ttf) format("truetype"),
        url(./../fonts/Rockwell-Bold.eot) format("embedded-opentype");
    font-weight: 700;
    font-style: normal;
}
:root {
    /* Variable for showing success/info/warning/error modal */
    --duration: 5s;
    /* Variable before allow resending SMS */
    --progress: 60s;
    /* Variables for opening base64 images */
    --imgb64width: 600px;
    --imgb64height: 800px;
}
*:focus {
    outline: none;
}
html {
    height: 100%;
    position: relative;
}
body {
    font-family: Nunito Sans,Roboto,sans-serif;
    color: #063b5b;
    height: 100%;
    position: relative;
    margin: 0px;
    background: rgba(78,186,128,0.12);
    background: -moz-linear-gradient(-45deg, rgba(78,186,128,0.12) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(6,58,91,0.12) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(78,186,128,0.12)), color-stop(20%, rgba(255,255,255,1)), color-stop(80%, rgba(255,255,255,1)), color-stop(100%, rgba(6,58,91,0.12)));
    background: -webkit-linear-gradient(-45deg, rgba(78,186,128,0.12) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(6,58,91,0.12) 100%);
    background: -o-linear-gradient(-45deg, rgba(78,186,128,0.12) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(6,58,91,0.12) 100%);
    background: -ms-linear-gradient(-45deg, rgba(78,186,128,0.12) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(6,58,91,0.12) 100%);
    background: linear-gradient(135deg, rgba(78,186,128,0.12) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(6,58,91,0.12) 100%); 
    background-attachment: fixed;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eba80', endColorstr='#063a5b', GradientType=1 );
}
divider {
    position: fixed;
    top: 0;
    height: 70px;
    left: 0;
    width: 100%;
    box-shadow: #4eba8121 0px 0px 3px 2px;
    z-index: 2;
    background-color: white;
}
header {    
    position: fixed;
    width: 100%;
    margin: 0px;
    z-index: 3;
}
.header {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    height: 70px;
    padding: 0px 30px;
	z-index: 3;
	min-width: 1100px;
}
content {
    width: 100%;
    z-index: 1;
}
.content {
    position: relative;
    clear: both;
    display: block;
    margin: 0px auto;
    padding: 70px 30px 110px 30px;
    min-width: 0;
    max-width: 1100px;
}
.logo {
    margin: 0px;
    float: left;
    padding-top: 15px;
}
.logo:hover {
    cursor: pointer;
    color: #1aa5ef;
}
.logo .logo-text {
    vertical-align: top;
    display: inline-block;
    font-family: 'Rockwell';
    font-size: 1rem;
    margin-top: 9px;
    margin-left: 20px;
}
.usermenu {
    float: right;
    margin: 0px;
    padding-top: 25px;
}
.usermenu span {
    vertical-align: sub;
}
.support {
    position: relative;
    margin-left: 30px;
    font-size: 1.3rem;
}
.support:hover {
    cursor: pointer;
    color: #1aa5ef;
}
.notification-menu {
    position: relative;
    border: 0px solid black;
    top: 70px;
    width: 400px;
    height: 0px;
    visibility: hidden;
    background: linear-gradient(#edf8fe, #edf8fe, #edf8fe, #edf8fe, #edf8fe, #edf8feee, white);
    padding: 0px;
    transition: height 500ms ease-in-out;
	margin-left: auto;
	z-index: 1;
}
.notification-menu.active {
    visibility: visible;
    height: 500px;
    overflow-y: auto;
}
.notification-icon {
    position: relative;
    margin-left: 30px;
    font-size: 1.3rem;
}
.notification:hover {
    cursor: pointer;
    color: #1aa5ef;
    /*opacity: 0.66666666;*/
}
.notification-icon {
    height: 20px;
    margin-left: 30px;
    vertical-align: middle;
}
.notification-badge {
    position: relative;
    font-size: 0.59rem;
    top: -14px;
    height: auto;
    right: 16px;
    padding: 2px 5px;
    border-radius: 50%;
    background: red;
    color: white;
    font-weight: bold;
    font-family: 'Rockwell';
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.notification-badge.active {
    opacity: 1;
    transition: opacity 0.4s ease-out;
}
table#notification_table {
    border-collapse: separate;
    border-spacing: 0px 0px;
}
.not-row {
    font-size: 1rem;
}
.not-row td{
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 25px;   
}
.not-info {
    background-color: #1aa5ef1f;
}
.not-info .not-icon{
    color: #1aa5ef
}
.not-success {
    background-color: #4EBA811f;
}
.not-success .not-icon {
    color: #4eba81;
}
.not-warning {
    background-color: #FF99381f;
}
.not-warning .not-icon{
    color: #FF9938;
}
.not-error {
    background-color: #AF08081f;
}
tr.not-error:hover {
    border-left: 5px solid #AF0808;
}
.not-error .not-icon{
    color: #AF0808;
}
.not-icon {
    font-size: 1.2rem;
    padding-left: 15px !important;
    vertical-align: top;
}
.not-title {
    font-weight: bold;
    margin-top: 0px;
    display: block;
}
.not-text {
    display: block;
    margin-top: 5px;
    color: #063b5b;
}
.not-message .btn{
    float:right; 
    margin-top: -12px; 
    margin-right: 0px;
    font-size: 15px;
    background-color: #237ca800 ;
    color: #06355b;
    text-decoration: underline;
    padding: 10px !important;
}
.not-message .btn:hover{
    color: white;
    text-decoration: none;
}
.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.disabled_loading {
    opacity: 0.5;
    cursor: wait;
}
.disabled_loading button {    
    pointer-events: none;
}
#login_owner input {
    width: auto;
}
.form-title {
    background-color: #4eba8122;
    padding-left: 30px;
}
.step {
    font-family: 'Rockwell';
    font-size: 0.8rem;
    color: #063b5bba;
    width: 33%;
}
.process-steps a{
    color: #a6ddc0;
    text-decoration: none;
}
.process-steps .active a{
    color: #4eba81;
}

.container {
    width: 100%;
    margin: 0px auto;
    height: 80px;
}
.process-steps {
    counter-reset: step;
}
.process-steps li {
    list-style-type: none;

    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #a6ddc0;
}
.process-steps li:before {
    width: 30px;
    height: 30px;
    content: counter(step);
    counter-increment: step;
    line-height: 30px;
    border: 0px solid #4eba81;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}
.process-steps li:after {
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;
    background-color: #a6ddc0;
    top: 15px;
    left: -50%;
    z-index: -1;
}
.process-steps li:first-child:after {
    content: none;
}
.process-steps li.active {
    color: #4eba81;
    font-size: 1rem;
}
.process-steps li.active:before {

}
.process-steps li.active + li:after {

}
.step-badge {
    font-size: 0.59rem;
    height: auto;
    padding: 2px 5px;
    border-radius: 50%;
    background: #063b5b70;
    color: white;
    font-weight: bold;
    font-family: 'Rockwell';
    opacity: 1;
}
.bc-td.active .step-badge {
    background-color: #1aa5ef;
}
/* The.chkbox */
.chkbox {
    display: block;
    position: relative;
    padding: 0px;
    margin-bottom: 26px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }  
  /* Hide the browser's default checkbox */
  .chkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }  
  /* Create a custom checkbox */
  .chkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #e1e7eb;
  }  
  /* On mouse-over, add a grey background color */
  .chkbox:hover input ~ .chkmark {
    background-color: #1aa5ef4d;
  }  
  /* When the checkbox is checked, add a blue background */
  .chkbox input:checked ~ .chkmark {
    background-color: #e1e7eb;
  }  
  /* Create the.chkmark/indicator (hidden when not checked) */
  .chkmark:after {
    content: "";
    position: absolute;
    display: none;
  }  
  /* Show the.chkmark when checked */
  .chkbox input:checked ~ .chkmark:after {
    display: block;
  }  
  /* Style the.chkmark/indicator */
  .chkbox .chkmark:after {
    left: 8px;
    top: -1px;
    width: 6px;
    height: 15px;
    border: solid #063b5b;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
h1 {
    font-family: rockwell;
}
p {
    display: block;
    padding: 10px 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.form-small {
    margin-top: 30px;
}
.buttons {
    display: none;
    margin-top: 20px;
}
.buttons.active {
    display: block;
    margin-top: 20px;
}
.buttons-left {
    float: left;
}
.buttons-right {
    float: right;
}
.clearfix {
    overflow: auto;
    clear: both;
}
.popup {
    position: relative;
}
.popup:hover {
    cursor: default;
    box-shadow: #1aa5ef4f 1px 1px 1px 0px;
}
.popup .popup-icon {
    color: #1aa5ef;
    margin-left: 10px;
    font-size: 1.2rem;
}
.popup .popup-hide {
    position: absolute;
    opacity: 0;
    width: 100%;
    background: linear-gradient(to bottom,#ffffff 0%, #1aa5ef10 100%);
    background-color: #ffffff;
    max-height: 0px;
    transition: max-height 500ms ease-in;
    overflow: hidden;
    z-index: 99;
    box-shadow: #1aa5ef4f 1px 1px 1px 0px;
}
.popup:hover .popup-hide {
    opacity: 1;
    max-height: 500px;
    transition: max-height 500ms ease-out;
    overflow: hidden;
}
.popup-hide table {
    padding-right: 10px;
}
.btn {
    position: relative;
    border-radius: .14286em !important;
    padding: 10px 20px;
    background-color: #4eba81;
    border: 0px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-family: Nunito Sans,Roboto,sans-serif;
}
.btn:hover {
    transition: background-color 200ms;
    background-color: #4eba81e1;
}
.btn-cancel {
    background-color: #063b5b1f;
    color: #063b5bf1;
    box-shadow: 0px 0px 0px 2px #063b5b inset;
}
.btn-cancel:hover {    
    background-color: #063b5b;
    color: #ffffff;
    transition: background-color 200ms, color 200ms;
}
.btn-secondary {
    padding: 10px 20px;
    background-color: #4eba811e;
    color: #4eba81;
    box-shadow: 0px 0px 0px 2px #4eba81e1 inset;
}
.btn-secondary:hover {    
    background-color: #4eba81e1;
    color: #ffffff;
    transition: background-color 200ms, color 200ms;
}
.btn-delete {
    padding: 1px 20px;
    background-color: #8b06061f;
    color: #063b5bf1;
    box-shadow: 0px 0px 0px 2px #8b0606 inset;
}
.btn-delete:hover {    
    background-color: #8b0606;
    color: #ffffff;
    transition: background-color 200ms, color 200ms;
}
.btn.send {
    margin-right: 30px;
    display: none;
}
.btn.restart {

}
.btn.add {
    /*display: none;*/
}
.btn.progress.init {
    background-color: #CCCCCC;
}
.btn.progress.init:hover {
    cursor: not-allowed;
}
.btn.progress .progressbar {
    border-radius: .14286em !important;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	width: 0;
	z-index: 5;
    background: #CCCCCC;
    background-color: #52bb84;
	opacity: 0;
	transition: all 0.3s ease;
}
.btn.progress.active .progressbar {
    height: 6px;
    opacity: 1;
    width: 100%;
	transition: width var(--progress) ease;
}
.btn.progress.ready {
	transition: background-color 0.5s ease-in;
}
.btn-login {
    padding: 60px 20px;
    background-color: #063b5b;
    border: 0px;
    color: white;
    cursor: pointer;
    transition: padding 0.4s;
}
.btn#logout {
    padding: 1px 20px;
    height: 26px;
    background-color: #4eba81;
    margin-left: 30px;
}
.btn#logout:hover {
    background-color: #063b5b;
}
.btn-blue {
    padding: 10px 20px;
    background-color: #063b5b;
    border: 0px;
    color: white;
    cursor: pointer;
    transition: padding 1s;
}
.btn-blue:hover {
    background-color:#063b5be1;
}
.btn-blue:disabled {
    cursor: default;
    background-color: #063b5b;
}
.btn-blue.active {
    background-color: #ffffff00;
    color: #06355b;
    border-top: 0px solid #063b5b;
    box-shadow: inset 0px 2px 1px 0px #063b5b, inset 0 3px 2px #1aa5ef;
}
.btn.btn-small {
    padding: 5px 20px;
}
#eid_action {    
    display: inline-block;
    vertical-align: middle;
}
#eid_action p{
    display: none;
}
#eid_action.empty .empty, #eid_action.found .found, #eid_action.install .install {
    display: block;
}
.eid-refresh {
    display: inline-block;
}
.login-eid.icon {
    width: 80px;
    min-height: 50px;
}
.login-eid.img {
    margin-right: 30px;
}
.login-eid.detail {
    width: 100%;
    vertical-align: bottom;
}
.login-eid.subject {
    display: block;
    color: #063b5b;
    font-weight: bold;
    font-size: 1.25rem;
}
.login-eid.issuer {
    display: block;
    font-size: smaller;
    color: #4eba81;
    margin-top: 6px;
    font-weight: bold;
}
.login-eid.issuer::before {
    content: 'issuer: ';
    font-weight: normal;
}
.login-eid.extra {
    vertical-align: bottom;
}
.login-eid.reader {
    display: block;
    font-size: smaller;
    color: #4eba8171;
    font-weight: bold;
    white-space: nowrap;
}
.login-eid.reader::before {
    content: 'reader: ';
    font-weight: normal;
}
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.menu-item {
    cursor: pointer;
    display: table;
    position: relative;
    height: 65px;
    width: 50%;
    margin-bottom: 15px;
    padding: 5px 20px;
    border-width: 0px;
    border-radius: .14286em !important;
    background-color: #1aa5ef14;
    box-shadow: #063b5b40 1px 1px 1px 0px;
}
.menu-item:hover {
        transition: background-color 100ms;
        background-color: #1aa5ef24;
}
.menu-item.active {
        transition: background-color 100ms;
        background-color: #1aa5ef;
}
.menu-item span {
    display: table-cell;
    vertical-align: middle;
}
.menu-item .menu-icon {
    width: 80px;
    padding-top: 6px;
    height: 59px;
    text-align: center;
    opacity: 90%;
}
.menu-item .menu-icon img {
    width: 50px;
    height: 50px;
}
.menu-item .menu-name {
    display: table-cell;
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: 10px;
}
div#previews {
    padding-top: 20px;
}
#upload_supported p {
    font-family: Rockwell;
    font-weight: bold;
    padding: 10px 10px 5px 10px;
}
#upload_supported table {
    margin-right: 0;
    margin-left: auto;
}
#upload_supported td {
    text-align: right;
}
#upload_supported img {
    width: 50px;
}
#upload.upload-border {
    border: #063b5b 3px dashed;
}
#upload_screen {
    background-color: #063b5ba8;
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 50px;
    width: 100%;
    height: calc(100% - 80px);
    z-index: 99999;
}
#upload_screen div {
    border: 4px #063b5b dashed;
    border-radius: .14286em !important;
    position: relative;
    display: block;
    width: 100%;
    max-width: 1150px;
    height: calc(100% - 130px);
    margin: 78px auto 89px auto;
    background-color: #063b5b69;
}
#upload_screen div span {
    font-family: Rockwell;
    font-weight: bold;
    font-size: 3rem;
    color: #ffffffe0;
    width: 330px;
    top: calc(50% - 80px);
    left: calc(50% - 165px);
    position: absolute;
}
.file-row {
    position: relative;
    display: table-row;
    min-height: 65px;
    display: block;
    margin-bottom: 10px;
    padding: 5px 20px;    
    border-width: 0px;
    border-radius: .14286em !important;
    background-color: #4eba8110;
    box-shadow: #1aa5ef36 1px 1px 2px 0px;
}
.file-row.active {
    background-color: #1aa5ef14;
}
.file-row.added {
    background-color: #4eba8110;
    animation: file-added 1.2s;
}
@keyframes file-added {
      0% { background-color: #1aa5ef14 ;}
     20% { background-color: #4eba804a ;}
    100% { background-color: #4eba8110 ;}
}
.file-row:hover {
    transition: background-color 100ms;
    background-color: #4eba8120;
}
.file-row.active:hover {
    transition: background-color 100ms;
    background-color: #1aa5ef24;
}
.file-row .file-table {
    width: 100%;
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 0px;
    border: 0px;
}
.file-row .file-table td {    
    display: table-cell;
    vertical-align: middle;
    height: 59px; 
}
.file-row .file-icon {
    text-align:left;
    width:80px;
}
.file-row .file-icon img {
    text-align:left;
    width:80px;
}
.file-row .file-name {
    text-align:left;
}
.file-row .file-size {
    text-align:right;
    width: 90px;
}
.file-row .file-action {
    text-align:right;
    width: 100px
}
.file-row .file-table td img {
    margin-top: 7px; 
    display: table-cell;
    vertical-align: middle;
    max-width: 50px;
    max-height: 50px;
}
.file-progress {
    border-radius: .14286em !important;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	width: 100%;
	z-index: 5;
    background: #1aa5ef36;
	opacity: 0;
	transition: all 0.3s ease;
}
.file-progress .file-filler {
    position: absolute;
    background-color: #1aa5ef;
}
.file-progress.active {
    height: 4px;
    opacity: 0.8;
	/*transition: width 0.1s ease;*/
}
.file-progress.active .file-filler {
    height: 4px;
    opacity: 0.5;
    width: 0;
	transition: width 0.5s ease;
}
/* The total progress gets shown by event listeners */
#total-progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}
/* Hide the progress bar when finished */
.file-row.dz-success div .progress {
    opacity: 0;
    transition: opacity 0.3s linear;
}
.float-right {
    float: right;
}
.float-right::after {
    clear: both;
}
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    color: #ffffff;
    background-color: #063b5b;
    text-align: center;
    vertical-align: middle;
    padding-top: 30px;
}
span.glyphicon.glyphicon-copyright-mark {
    font-size: 0.8rem;
    padding-right: 10px;
}
.align-right {
    width:100%;
    text-align:right;
}
@keyframes inAndOut {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}
.modal {
    position: fixed;
    bottom: 90px;
    left: 30px;
    max-width: 600px;
    display: block;
    padding: 40px 50px 20px 50px;
    background-color: #237ca8;
    box-shadow: #063b5b 1px 1px 2px 0px;
    color: white;
    opacity: 0;
}
.modal .modal-type {
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: Rockwell;
    font-weight: bold;
    font-size: 1rem;
    color: #063b5b;
    text-transform: lowercase;
}
.modal.animate {
    -moz-animation: inAndOut var(--duration) ease-in forwards;
    -webkit-animation: inAndOut var(--duration) ease-in forwards;
    animation: inAndOut var(--duration) ease-in forwards;
} 
.modal.modal-error {
    background-color: #b54747;
    box-shadow: #610b0b 1px 1px 2px 0px;
}
.modal.modal-error .modal-type {
    color: #651616;
}
.modal.modal-success {
    background-color: #4eba81;
    box-shadow: #258a54 1px 1px 2px 0px;
}
.modal.modal-success .modal-type {
    color: #258a54;
}
table#login_eid_cert_table {
    width: 100%;
}
#login_eid_icon {
    width: 80px;
    min-height: 50px;
}
.cert-card {
    min-height: 65px;
    border-width: 0px;
    border-radius: .14286em !important;
    display: block;
    margin-bottom: 10px;
    padding: 5px 20px;
    background-color: #4eba8110;
    box-shadow: rgba(82,187, 132 ,0.50) 1px 1px 2px 0px
}
.cert-card:hover {
    transition: background-color 200ms;
    background-color: #4eba8115;
}
.cert-card#login_eid_cert_template {
    cursor:no-drop;
}
.cert-card td {
    opacity: 20%;
}
.card-loaded {
    cursor: pointer;
}
.card-loaded:hover {
    transition: background-color 500ms;
    background-color: #4eba8130;
}
.card-loaded.selected {
    cursor: not-allowed;
    transition: background-color 200ms;
    background-color: #4eba8150;
}
.card-loaded.selected:hover {
    cursor: not-allowed;
    transition: background-color 200ms;
    background-color: #4eba8150;
}
.card-loaded td {
    opacity: 100%;
}
.card-pin {
    transition: opacity 0.2s ease-in;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.card-pin.active {
    opacity: 1;
    height: auto;
}
.card-pin.inactive {
    transition: opacity 0.2s ease-in;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.little {
    font-size: 0.8rem;
}
.process-progress {    
    background-color: #4eba811e;
    height: 30px;
    border: 2px #4eba81e1 solid;
    margin: 10px 0px 0px 0px;
    border-radius: .14286em !important;
}
.process-filler {
    display: block;
    width: 0%;
    background-color: #4eba81e1;
    height: 30px;
    margin: 0px 0px;
    border-radius: .14286em !important;
    transition: width 0.5s ease;
}
.process-filler.error {
    background-color: #8b0606e1;
}
.process-result {
    margin-top: 20px;
}
.sh-row {
    position: relative;
    display: table-row;
    min-height: 65px;
    display: block;
    margin-bottom: 10px;
    padding: 5px 20px;    
    border-width: 0px;
    border-radius: .14286em !important;
    background-color: #4eba811e;
    box-shadow: #1aa5ef36 1px 1px 2px 0px;
    transition: background-color 100ms;
}
.sh-row.error {
    background-color: #8b06060c;
}
.sh-row.active {
    background-color: #1aa5ef1e;
}
.sh-row.added {
    background-color: #4eba811e;
    animation: sh-added 1.2s;
}
@keyframes sh-added {
      0% { background-color: #1aa5ef1e ;}
     20% { background-color: #4eba804e ;}
    100% { background-color: #4eba811e ;}
}
.sh-row:hover {
    transition: background-color 100ms;
    background-color: #4eba812e;
}
.sh-row.error:hover {
    transition: background-color 100ms;
    background-color: #8b06061c;
}
.sh-row.active:hover {
    transition: background-color 100ms;
    background-color: #1aa5ef2e;
}
.sh-docs {
    width: 100%;
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 0px;
    border: 0px;
}
.sh-docs td{    
    border: 0px;
    height: 65px;
}
.sh-icon {
    width: 80px;
    position: relative;
    text-align: center;
}
.sh-doc span {
    display: block;
}
.sh-doc-action {
    text-align: right; 
}
.sh-doc-action button {
    margin-left: 30px;
}
.sh-row.error .sh-doc-action button {
    visibility: hidden;
}
.sh-row.error .sh-doc-action {
    content: 'Not processed';
}
.sh-preview {
    cursor: pointer;
    height: 50px;
    width: 50px;
    margin-top: 8px;
    text-align: center;
}
.sh-full {
    position: absolute;
    visibility: hidden;
    height: 50px;
    width: 50px;
    left: 1px;
    top: 9px;
    z-index: -1;
}
.sh-full.active {
    visibility: visible;
    background-color: #ffffffcc;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.sh-full img {
    height: 50px;  
}
.sh-full.active img {
    width: var(--imgb64width);
    /*left: calc(50% - calc(var(--imgb64width)/2));*/
    position: relative;
    top: calc((100% - var(--imgb64height))/2);
    height: auto;
    border: 5px #4eba81 solid;
    opacity: 1;
    z-index: 100;  
}
.sh-preview.error {
    visibility: hidden;
}
#doc_preview {
    width: 100%;
    height: auto;
    height: 500px;
}
#preview_iframe {
    width: 100%;
    height: 100%;
    border: 0px;
}
div.send {
    margin-top: 13px;
    padding: 5px 30px 20px 30px;
    border-radius: .14286em !important;
}
div.send.wait {
    background-color: #237ca81e;
}
div.send.success {
    background-color: #4eba811e;
}
div.send.error {
    background-color: #8b06061f;
}
div.send.success h3 {
    color: #4eba81;
}
div.send.error h3 {
    color: #8b0606;
}
.service .glyphicon {
    display: inline-block;
    font-size: 30px;
    margin-left: 30px;
}
.service {
    padding-top: 30px;
}
.service div {
    padding-top: 0px;
    margin-left: 50px;
}
.service p {
    display: inline-block;
    margin-left: 30px;
    vertical-align: text-bottom;
}
.service a {
    display: block;
    margin-left: 100px;
    font-weight: bold;
    font-size: 1.5rem;
    color: #063b5b;
    text-decoration: none;
}
.service a:hover {
    color: #1aa5ef;
    text-decoration: underline;
}


/* FORM ELEMENTS */
label {
    padding: 10px 30px;
    font-family: rockwell;
    font-weight: bold;
}
.label {
    text-align: right;
    min-width: 150px;
    vertical-align: top;
    padding-top: 10px;
}
input {
    padding: 4px 8px;
    font-size: 20px;
    border-radius: .14286em !important;
    border: 2px solid #063b5b00;
    background-color: #063b5b1f;
    color: #063b5b;
    width: 100%;
}
input:required {
    background-image: url('./images/asterisk.svg');
    background-size: 10px auto;
    background-repeat: no-repeat;
    background-position: right top;
}
.input-error {
    border: 2px solid #8b0606;
    background-color: #8b06061f;
    border-radius: .14286em !important;
}
.input-error:focus {
    border: 2px solid #063b5b00;
    background-color: #063b5b1e;
    color: #063b5b;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #063b5b4e;
    font-size: 0.9rem;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #063b5b4e;
    font-size: 0.9rem;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #063b5b4e;
    font-size: 0.9rem;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #063b5b4e;
    font-size: 0.9rem;
}
.input-error::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #8b06064e;
    font-size: 0.9rem;
  }
  .input-error::-moz-placeholder { /* Firefox 19+ */
    color: #8b06064e;
    font-size: 0.9rem;
  }
  .input-error:-ms-input-placeholder { /* IE 10+ */
    color: #8b06064e;
    font-size: 0.9rem;
  }
  .input-error:-moz-placeholder { /* Firefox 18- */
    color: #8b06064e;
    font-size: 0.9rem;
}

/* GLYPH ICONS */
@font-face {
    font-family: 'Glyphicons Halflings';
    src:    url(../fonts/glyphicons-halflings-regular.eot);
    src:    url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
            url(../fonts/glyphicons-halflings-regular.woff) format('woff'),
            url(../fonts/glyphicons-halflings-regular.ttf) format('truetype')
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.glyphicon-asterisk:before {
    content: "\2a"
}

.glyphicon-plus:before {
    content: "\2b"
}

.glyphicon-euro:before {
    content: "\20ac"
}

.glyphicon-minus:before {
    content: "\2212"
}

.glyphicon-cloud:before {
    content: "\2601"
}

.glyphicon-envelope:before {
    content: "\2709"
}

.glyphicon-pencil:before {
    content: "\270f"
}

.glyphicon-glass:before {
    content: "\e001"
}

.glyphicon-music:before {
    content: "\e002"
}

.glyphicon-search:before {
    content: "\e003"
}

.glyphicon-heart:before {
    content: "\e005"
}

.glyphicon-star:before {
    content: "\e006"
}

.glyphicon-star-empty:before {
    content: "\e007"
}

.glyphicon-user:before {
    content: "\e008"
}

.glyphicon-film:before {
    content: "\e009"
}

.glyphicon-th-large:before {
    content: "\e010"
}

.glyphicon-th:before {
    content: "\e011"
}

.glyphicon-th-list:before {
    content: "\e012"
}

.glyphicon-ok:before {
    content: "\e013"
}

.glyphicon-remove:before {
    content: "\e014"
}

.glyphicon-zoom-in:before {
    content: "\e015"
}

.glyphicon-zoom-out:before {
    content: "\e016"
}

.glyphicon-off:before {
    content: "\e017"
}

.glyphicon-signal:before {
    content: "\e018"
}

.glyphicon-cog:before {
    content: "\e019"
}

.glyphicon-trash:before {
    content: "\e020"
}

.glyphicon-home:before {
    content: "\e021"
}

.glyphicon-file:before {
    content: "\e022"
}

.glyphicon-time:before {
    content: "\e023"
}

.glyphicon-road:before {
    content: "\e024"
}

.glyphicon-download-alt:before {
    content: "\e025"
}

.glyphicon-download:before {
    content: "\e026"
}

.glyphicon-upload:before {
    content: "\e027"
}

.glyphicon-inbox:before {
    content: "\e028"
}

.glyphicon-play-circle:before {
    content: "\e029"
}

.glyphicon-repeat:before {
    content: "\e030"
}

.glyphicon-refresh:before {
    content: "\e031"
}

.glyphicon-list-alt:before {
    content: "\e032"
}

.glyphicon-lock:before {
    content: "\e033"
}

.glyphicon-flag:before {
    content: "\e034"
}

.glyphicon-headphones:before {
    content: "\e035"
}

.glyphicon-volume-off:before {
    content: "\e036"
}

.glyphicon-volume-down:before {
    content: "\e037"
}

.glyphicon-volume-up:before {
    content: "\e038"
}

.glyphicon-qrcode:before {
    content: "\e039"
}

.glyphicon-barcode:before {
    content: "\e040"
}

.glyphicon-tag:before {
    content: "\e041"
}

.glyphicon-tags:before {
    content: "\e042"
}

.glyphicon-book:before {
    content: "\e043"
}

.glyphicon-bookmark:before {
    content: "\e044"
}

.glyphicon-print:before {
    content: "\e045"
}

.glyphicon-camera:before {
    content: "\e046"
}

.glyphicon-font:before {
    content: "\e047"
}

.glyphicon-bold:before {
    content: "\e048"
}

.glyphicon-italic:before {
    content: "\e049"
}

.glyphicon-text-height:before {
    content: "\e050"
}

.glyphicon-text-width:before {
    content: "\e051"
}

.glyphicon-align-left:before {
    content: "\e052"
}

.glyphicon-align-center:before {
    content: "\e053"
}

.glyphicon-align-right:before {
    content: "\e054"
}

.glyphicon-align-justify:before {
    content: "\e055"
}

.glyphicon-list:before {
    content: "\e056"
}

.glyphicon-indent-left:before {
    content: "\e057"
}

.glyphicon-indent-right:before {
    content: "\e058"
}

.glyphicon-facetime-video:before {
    content: "\e059"
}

.glyphicon-picture:before {
    content: "\e060"
}

.glyphicon-map-marker:before {
    content: "\e062"
}

.glyphicon-adjust:before {
    content: "\e063"
}

.glyphicon-tint:before {
    content: "\e064"
}

.glyphicon-edit:before {
    content: "\e065"
}

.glyphicon-share:before {
    content: "\e066"
}

.glyphicon-check:before {
    content: "\e067"
}

.glyphicon-move:before {
    content: "\e068"
}

.glyphicon-step-backward:before {
    content: "\e069"
}

.glyphicon-fast-backward:before {
    content: "\e070"
}

.glyphicon-backward:before {
    content: "\e071"
}

.glyphicon-play:before {
    content: "\e072"
}

.glyphicon-pause:before {
    content: "\e073"
}

.glyphicon-stop:before {
    content: "\e074"
}

.glyphicon-forward:before {
    content: "\e075"
}

.glyphicon-fast-forward:before {
    content: "\e076"
}

.glyphicon-step-forward:before {
    content: "\e077"
}

.glyphicon-eject:before {
    content: "\e078"
}

.glyphicon-chevron-left:before {
    content: "\e079"
}

.glyphicon-chevron-right:before {
    content: "\e080"
}

.glyphicon-plus-sign:before {
    content: "\e081"
}

.glyphicon-minus-sign:before {
    content: "\e082"
}

.glyphicon-remove-sign:before {
    content: "\e083"
}

.glyphicon-ok-sign:before {
    content: "\e084"
}

.glyphicon-question-sign:before {
    content: "\e085"
}

.glyphicon-info-sign:before {
    content: "\e086"
}

.glyphicon-screenshot:before {
    content: "\e087"
}

.glyphicon-remove-circle:before {
    content: "\e088"
}

.glyphicon-ok-circle:before {
    content: "\e089"
}

.glyphicon-ban-circle:before {
    content: "\e090"
}

.glyphicon-arrow-left:before {
    content: "\e091"
}

.glyphicon-arrow-right:before {
    content: "\e092"
}

.glyphicon-arrow-up:before {
    content: "\e093"
}

.glyphicon-arrow-down:before {
    content: "\e094"
}

.glyphicon-share-alt:before {
    content: "\e095"
}

.glyphicon-resize-full:before {
    content: "\e096"
}

.glyphicon-resize-small:before {
    content: "\e097"
}

.glyphicon-exclamation-sign:before {
    content: "\e101"
}

.glyphicon-gift:before {
    content: "\e102"
}

.glyphicon-leaf:before {
    content: "\e103"
}

.glyphicon-fire:before {
    content: "\e104"
}

.glyphicon-eye-open:before {
    content: "\e105"
}

.glyphicon-eye-close:before {
    content: "\e106"
}

.glyphicon-warning-sign:before {
    content: "\e107"
}

.glyphicon-plane:before {
    content: "\e108"
}

.glyphicon-calendar:before {
    content: "\e109"
}

.glyphicon-random:before {
    content: "\e110"
}

.glyphicon-comment:before {
    content: "\e111"
}

.glyphicon-magnet:before {
    content: "\e112"
}

.glyphicon-chevron-up:before {
    content: "\e113"
}

.glyphicon-chevron-down:before {
    content: "\e114"
}

.glyphicon-retweet:before {
    content: "\e115"
}

.glyphicon-shopping-cart:before {
    content: "\e116"
}

.glyphicon-folder-close:before {
    content: "\e117"
}

.glyphicon-folder-open:before {
    content: "\e118"
}

.glyphicon-resize-vertical:before {
    content: "\e119"
}

.glyphicon-resize-horizontal:before {
    content: "\e120"
}

.glyphicon-hdd:before {
    content: "\e121"
}

.glyphicon-bullhorn:before {
    content: "\e122"
}

.glyphicon-bell:before {
    content: "\e123"
}

.glyphicon-certificate:before {
    content: "\e124"
}

.glyphicon-thumbs-up:before {
    content: "\e125"
}

.glyphicon-thumbs-down:before {
    content: "\e126"
}

.glyphicon-hand-right:before {
    content: "\e127"
}

.glyphicon-hand-left:before {
    content: "\e128"
}

.glyphicon-hand-up:before {
    content: "\e129"
}

.glyphicon-hand-down:before {
    content: "\e130"
}

.glyphicon-circle-arrow-right:before {
    content: "\e131"
}

.glyphicon-circle-arrow-left:before {
    content: "\e132"
}

.glyphicon-circle-arrow-up:before {
    content: "\e133"
}

.glyphicon-circle-arrow-down:before {
    content: "\e134"
}

.glyphicon-globe:before {
    content: "\e135"
}

.glyphicon-wrench:before {
    content: "\e136"
}

.glyphicon-tasks:before {
    content: "\e137"
}

.glyphicon-filter:before {
    content: "\e138"
}

.glyphicon-briefcase:before {
    content: "\e139"
}

.glyphicon-fullscreen:before {
    content: "\e140"
}

.glyphicon-dashboard:before {
    content: "\e141"
}

.glyphicon-paperclip:before {
    content: "\e142"
}

.glyphicon-heart-empty:before {
    content: "\e143"
}

.glyphicon-link:before {
    content: "\e144"
}

.glyphicon-phone:before {
    content: "\e145"
}

.glyphicon-pushpin:before {
    content: "\e146"
}

.glyphicon-usd:before {
    content: "\e148"
}

.glyphicon-gbp:before {
    content: "\e149"
}

.glyphicon-sort:before {
    content: "\e150"
}

.glyphicon-sort-by-alphabet:before {
    content: "\e151"
}

.glyphicon-sort-by-alphabet-alt:before {
    content: "\e152"
}

.glyphicon-sort-by-order:before {
    content: "\e153"
}

.glyphicon-sort-by-order-alt:before {
    content: "\e154"
}

.glyphicon-sort-by-attributes:before {
    content: "\e155"
}

.glyphicon-sort-by-attributes-alt:before {
    content: "\e156"
}

.glyphicon-unchecked:before {
    content: "\e157"
}

.glyphicon-expand:before {
    content: "\e158"
}

.glyphicon-collapse-down:before {
    content: "\e159"
}

.glyphicon-collapse-up:before {
    content: "\e160"
}

.glyphicon-log-in:before {
    content: "\e161"
}

.glyphicon-flash:before {
    content: "\e162"
}

.glyphicon-log-out:before {
    content: "\e163"
}

.glyphicon-new-window:before {
    content: "\e164"
}

.glyphicon-record:before {
    content: "\e165"
}

.glyphicon-save:before {
    content: "\e166"
}

.glyphicon-open:before {
    content: "\e167"
}

.glyphicon-saved:before {
    content: "\e168"
}

.glyphicon-import:before {
    content: "\e169"
}

.glyphicon-export:before {
    content: "\e170"
}

.glyphicon-send:before {
    content: "\e171"
}

.glyphicon-floppy-disk:before {
    content: "\e172"
}

.glyphicon-floppy-saved:before {
    content: "\e173"
}

.glyphicon-floppy-remove:before {
    content: "\e174"
}

.glyphicon-floppy-save:before {
    content: "\e175"
}

.glyphicon-floppy-open:before {
    content: "\e176"
}

.glyphicon-credit-card:before {
    content: "\e177"
}

.glyphicon-transfer:before {
    content: "\e178"
}

.glyphicon-cutlery:before {
    content: "\e179"
}

.glyphicon-header:before {
    content: "\e180"
}

.glyphicon-compressed:before {
    content: "\e181"
}

.glyphicon-earphone:before {
    content: "\e182"
}

.glyphicon-phone-alt:before {
    content: "\e183"
}

.glyphicon-tower:before {
    content: "\e184"
}

.glyphicon-stats:before {
    content: "\e185"
}

.glyphicon-sd-video:before {
    content: "\e186"
}

.glyphicon-hd-video:before {
    content: "\e187"
}

.glyphicon-subtitles:before {
    content: "\e188"
}

.glyphicon-sound-stereo:before {
    content: "\e189"
}

.glyphicon-sound-dolby:before {
    content: "\e190"
}

.glyphicon-sound-5-1:before {
    content: "\e191"
}

.glyphicon-sound-6-1:before {
    content: "\e192"
}

.glyphicon-sound-7-1:before {
    content: "\e193"
}

.glyphicon-copyright-mark:before {
    content: "\e194"
}

.glyphicon-registration-mark:before {
    content: "\e195"
}

.glyphicon-cloud-download:before {
    content: "\e197"
}

.glyphicon-cloud-upload:before {
    content: "\e198"
}

.glyphicon-tree-conifer:before {
    content: "\e199"
}

.glyphicon-tree-deciduous:before {
    content: "\e200"
}