/**********************************************************/
/*    Badanie Losów Absolwentów - wersja elektroniczna    */
/*          Copyright © 2015-2017, Marcin Szwarc          */
/*                          v2.0                          */
/*                                                        */
/*                      Arkusz stylów                     */
/**********************************************************/

body {margin:0;font-family:Roboto,Verdana,'Segoe UI',sans-serif;font-size:16px;background:#f8f8f8;color:rgba(0,0,0,0.87)}
em {font-weight:500;font-style:normal}
h3 {margin:5px 5px 5px 10px;color:#000;font-weight:400;font-size:18px;}
h3.error {color:#f44336}
hr {border:none;border-top:1px solid #eee;margin:10px -10px}
a {color:#068042;text-decoration:none}
a:hover {text-decoration:underline}
a:not(.button):focus {outline:thin dotted}
p:last-child {margin-bottom:0}

*:focus {outline:none}

main, aside {margin:20px auto;width:60%;background:white;padding:10px;border-radius:3px;box-shadow:1px 1px 7px #bbb;overflow:hidden}
main {border-top:7px solid #065c00}
main.narrow {width:40%}
div.survey-information {border:1px solid black;border-radius:5px;padding:5px;text-align:center}
.legal-note p:first-of-type {margin-top:0;}
.legal-note p:last-of-type {margin-bottom:0;}

div.logo-header {display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"title logo"}
img.logo-image {max-width:100%;grid-area:logo;border-left:2px solid #065c00;padding-left:20px;margin-left:-20px;}
h1.title {grid-area:title;align-self:center;margin-right:50px;margin-left:30px;text-align:center;font-weight:500;}

@media only screen and (max-width:780px){
  main, aside {width:auto;margin:20px 5px;}
  div.logo-header {grid-template-columns:1fr;grid-template-rows:auto auto;grid-template-areas:"logo" "title"}
  img.logo-image {border-left:none;padding:0px;}
  h1.title {margin:0px;text-align:center;font-weight:500;}
}

div.card-buttons {margin:10px -10px -10px -10px;border-top:1px solid #eee;padding:6px;text-align:right}
div.card-buttons span.info {text-align:left;float:left;display:inline-block;padding:6px 14px;}

a.button, button {display:inline-block;text-align:center;min-width:60px;color:rgba(0,0,0,0.87);font-weight:500;padding:8px 14px;
      text-transform:uppercase;border-radius:2px;transition:background 0.3s;font-size:0.875em;cursor:pointer;background:none;border:none;
      -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:Roboto,Verdana,'Segoe UI',sans-serif;}
a.button:not([data-disabled=disabled]).colored, button.colored {color:#03743b}
a.button:not([data-disabled=disabled]).light, button.light {color:#fff}
a.button:not([data-disabled=disabled]):hover, button:hover, 
a.button:not([data-disabled=disabled]).active, button.active {background:rgba(220,220,220,0.18);text-decoration:none}
a.button:not([data-disabled=disabled]):active, button:active {background:rgba(127,127,127,0.18)}
a.button[data-disabled=disabled] {color:rgba(0,0,0,0.54)}
a.button[data-disabled=disabled]:hover {text-decoration:none}

div.page-header {height:50px;background:#02532a;color:#fff;padding:8px 20px;position:absolute;width:100%;top:0;left:0;box-sizing:border-box}
div.page-header li {margin-left:5px;}
div.page-header span {padding:8px 0;display:inline-block}
div.page-header span.separator {border-left:1px solid rgba(220,220,220,0.18);float:right;height:1em;margin:0 5px}
div.page-header ul {list-style-type:none;margin:0;padding:0;overflow:hidden;display:inline;float:right}
div.page-header ul li {float:left}
div.page-header li.dropdown {position:relative;display:inline-block;}
div.page-header li.dropdown > a {transition:background 0s}
div.page-header li.dropdown > a:hover {background:transparent;}
div.page-header li.dropdown .dropdown-content {display:none;background:#8e24aa;color:#000;padding:0;z-index:1;position:relative;
      border-radius:0 0 2px 2px;max-height:303px;overflow-y:auto;overflow-x:hidden}
div.page-header li.dropdown .dropdown-content > a {display:block;color:rgba(0,0,0,0.54);padding:12px 16px;white-space:nowrap;font-weight:500}
div.page-header li.dropdown .dropdown-content > a:last-child {border-radius:0 0 2px 2px}
div.page-header li.dropdown .dropdown-content > a:hover,
div.page-header li.dropdown .dropdown-content > a.active {text-decoration:none;background:rgba(0,0,0,0.06)}
div.page-header li.dropdown .dropdown-content > a:active,
div.page-header li.dropdown .dropdown-content > a:focus {background:rgba(0,0,0,0.12);outline:none}
div.page-header li.dropdown > a::after {content:'\f0d7';font:normal normal normal 14px/1 FontAwesome;font-size:inherit;
      text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;
      margin-left:10px;width:1.28571429em;text-align:center;}
div.page-header li.dropdown:hover > a::after {content:'\f0d8'}
div.page-header li.dropdown:hover {background:#f8f8f8;border-radius:2px;box-shadow:1px 1px 12px -2px #888;margin-bottom:5px}
div.page-header li.dropdown:hover > a {color:rgba(0,0,0,0.54);border-bottom:1px solid #e0e0e0}
div.page-header li.dropdown:hover * {background:#f8f8f8}
div.page-header li.dropdown:hover .dropdown-content {display:block}

table.results {border-top:1px solid #080;border-left:1px solid #080;margin:60px 5px 5px 5px;font-size:10pt;border-spacing:0}
table.results td, table.results th {border-bottom:1px solid #080;border-right:1px solid #080;font-size:10pt;padding:1px}

p.invitation {text-align:justify;margin:1em auto 1em auto}

.justify {text-align:justify}
span.justify {display:inline-block}
.center {text-align:center;display:block}
.secondary {color:rgba(0,0,0,0.54);}
.small {font-size:0.85em}

.field-group {padding-left:20px;}
label.req::before {content:'\2022';color:#f44336;font-weight:700;float:left;margin:0px 0 0 -20px}
h3.req::before {content:'\2022';color:#f44336;font-weight:700;float:left;margin:0px 0 0 -12px}
span.req {color:#f44336;font-weight:bold}
label.fixed-width {width:21ch;display:inline-block}

input[type="radio"]:not(.no-label) {display:none}
input[type="radio"] + label {color:rgba(0,0,0,0.87);display:inline-block;cursor:pointer;margin-bottom:0.5em}
input[type="radio"] + label::before {content:'';border:0.125em solid transparent;width:0.75em;height:0.75em;display:inline-block;margin-left:0.425em;
      margin-right:0.755em;box-sizing:border-box;transition:border-color 0.3s, background 0.3s, box-shadow 0.3s;border-radius:50%;box-shadow:0 0 0 0.125em #888;}
input[type="radio"]:not(:checked) + label:not([disabled]):hover::before {background:#f0f0f0}
input[type="radio"]:checked + label::before {border-color:white;background:#03743b;box-shadow:0 0 0 0.125em #03743b;}
input[type="radio"]:checked + label:not([disabled]):hover::before {background:#02532a;box-shadow:0 0 0 0.125em #02532a;}

input[type="checkbox"]:not(.no-label) {display:none}
input[type="checkbox"] + label {color:rgba(0,0,0,0.87);display:inline-block;cursor:pointer;}
input[type="checkbox"] + label::before {content:'';border:0.1em solid #888;width:0.9em;height:0.9em;display:inline-block;margin-left:0.3em;
      margin-right:0.755em;box-sizing:border-box;transition:transform 0.3s, width 0.3s, margin-left 0.3s, border-color 0.3s;
      vertical-align:top;margin-top:2px;}
input[type="checkbox"]:not([disabled]):not(:checked) + label:hover::before {background:#f0f0f0}
input[type="checkbox"]:checked + label::before {border-color:transparent #03743b #03743b transparent;border-width:0 2px 2px 0;
      -webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);transform:rotate(40deg);width:0.5em;margin-left:0.7em}
input[type="checkbox"]:not([disabled]):checked + label:hover::before {border-color:transparent #02532a #02532a transparent}
input[type="checkbox"][disabled]:checked + label::before {border-color:transparent #888 #888 transparent;}

input[type=text], input[type=password] {border:none;border-bottom:2px solid rgba(0,0,0,0.42);margin-top:8px;
      transition:border-bottom-color 0.25s;background:rgba(0,0,0,0.06);border-radius:2px;padding:4px 8px}
input[type=text]:not([disabled]):hover, input[type=password]:hover {border-bottom-color:rgba(0,0,0,0.87)}
input[type=text]:focus, input[type=password]:focus,
input[type=text]:focus:hover, input[type=password]:focus:hover {border-bottom-color:#03743b}
input[type=text][disabled] {border-bottom-color:rgba(0,0,0,0.2)}

input[type=text].error, input[type=password].error {border-bottom-color:#f44336;}

/* Kółko ładowania */
/* Source: https://www.uplabs.com/posts/material-design-circular-activity-spinner-with-css */

.spinner-wrapper {padding:14px 0;height:1rem;float:left;margin-top:-7px}
.spinner {margin:-12px 0;text-align:center;display:inline-block;float:left}
.spinner svg {background-color:#fff;border-radius:50%;padding:8px}
 
.qp-circular-loader {width:64px;height:64px;stroke-width:3px}
.qp-circular-loader-path {stroke-dasharray:58.9;stroke-dashoffset:58.9} 
.qp-circular-loader, .qp-circular-loader * {-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transform-origin:50% 50%}
 
@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg)}
  to {-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg)}
  to {-moz-transform:rotate(360deg)}
}
@keyframes rotate {
  from {transform:rotate(0deg)}
  to {transform:rotate(360deg)}
}
 
.qp-circular-loader {-webkit-animation-name:rotate;-moz-animation-name:rotate;animation-name:rotate;
      -webkit-animation-duration:1568.63ms;-moz-animation-duration:1568.63ms;animation-duration:1568.63ms;
      -webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;animation-timing-function:linear;}

@-webkit-keyframes fillunfill {
  from {stroke-dashoffset:58.8}
  50% {stroke-dashoffset:0}
  to {stroke-dashoffset:-58.4}
}
@-moz-keyframes fillunfill {
  from {stroke-dashoffset:58.8}
  50% {stroke-dashoffset:0}
  to {stroke-dashoffset:-58.4}
}
@keyframes fillunfill {
  from {stroke-dashoffset:58.8}
  50% {stroke-dashoffset:0}
  to {stroke-dashoffset:-58.4}
}

@-webkit-keyframes rot {
  from {-webkit-transform:rotate(0deg)}
  to {-webkit-transform:rotate(-360deg)}
}
@-moz-keyframes rot {
  from {-moz-transform:rotate(0deg)}
  to {-moz-transform:rotate(-360deg)}
}
@keyframes rot {
  from {transform:rotate(0deg)}
  to {transform:rotate(-360deg)}
}
.qp-circular-loader-path {-webkit-animation-name:fillunfill,rot;-moz-animation-name:fillunfill,rot;animation-name:fillunfill,rot;
      -webkit-animation-duration:1333ms,5332ms;-moz-animation-duration:1333ms,5332ms;animation-duration:1333ms,5332ms;
      -webkit-animation-iteration-count:infinite,infinite;-moz-animation-iteration-count:infinite,infinite;animation-iteration-count:infinite,infinite;
      -webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1),steps(4);-moz-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1),steps(4);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1),steps(4);
      -webkit-animation-play-state:running,running;-moz-animation-play-state:running,running;animation-play-state:running,running;
      -webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;
      stroke:#03743b}