@font-face {
  font-family: "archivo-light";
  src: url("/fonts/archivo-light.woff2");
}

@font-face {
  font-family: "archivo-regular";
  src: url("/fonts/archivo-regular.woff2");
}

@font-face {
  font-family: "archivo-semi-bold";
  src: url("/fonts/archivo-semi-bold.woff2");
}

@font-face {
  font-family: "archivo-extra-bold";
  src: url("/fonts/archivo-extra-bold.woff2");
}

:root {
	--font-light: "archivo-light", helvetica, sans-serif; /* 300 */
	--font-regular: "archivo-regular", helvetica, sans-serif;
	--font-bold: "archivo-semi-bold", helvetica, sans-serif; /* 600 */
	--font-extra-bold: "archivo-extra-bold", helvetica, sans-serif; /* 800 */
	--color-light: #EDF8FC; /* light blue */
	--color-main:#b51e6d; /* pink / beetroot */
	--color-main-dark:#9d1a5f; /* maroon / beetroot dark */
	--color-main-darker: #420828; /* Wine */
	--color-silver: #E4E4E4;
	--color-gray: #666666; /* 40 */
	--color-black: #000000; /* 0 */
	--emplist: 250px;
	--sitepadding:10px;
	--sitepadding2:20px;
	
}

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

* {
  box-sizing: border-box;
}
body {
margin:0;
padding:0 var(--sitepadding) 0 var(--sitepadding);
font-family:var(--font-regular);
font-size:14pt;
color:var(--color-gray);
}
form {margin:0;padding:0;}
h1, h2, h3, h4, h5, h6, b {color:var(--color-black);font-family:var(--font-regular);}

a:link, a:visited {color:var(--color-main);}
a:active, a:hover {color:var(--color-main-dark);}

.fr {float:right;}

::-moz-selection{background:var(--color-main);color:#fff;text-shadow:none}
::selection{background:var(--color-main);color:#fff;text-shadow:none}

.top_header {display:table;width:100%;}
.top_header_content {display:table-cell;vertical-align:middle;height:80px;}
.logo {width:80px;aspect-ratio: auto 715 / 200;}
.line {position:relative;left:-20px;width:calc(100% + var(--sitepadding2));border-bottom:1px solid var(--color-silver);}
.bar {position:relative;left:-20px;width:calc(100% + var(--sitepadding2));border-bottom:1px solid var(--color-silver);background-color:var(--color-light);padding:20px;}
.shadow {box-shadow:0 0 30px rgba(0,0,0,0.2);}
.errorbox {border:1px solid var(--color-main);border-radius:10px;margin:20px 0;padding:20px;max-width:500px;}

.footer {position:relative;left:-20px;width:calc(100% + 30px);background-color:var(--color-main);padding:84px 28px;margin-top:50px;}
.footer .ftext {line-height:20px;color:rgba(255,255,255,0.8);font-size:14px;}
.footer .ftext b {font-weight:normal;color:rgba(255,255,255,1);}
.footer .ftext a, .footer .ftext a:link, .footer .ftext a:visited {text-decoration:none;color:rgba(255,255,255,0.8);;}

input.outline {border:2px solid var(--color-silver);padding:10px 20px;border-radius:100px;font-size:16pt;background-color:white;}
input.outline:focus {outline: none;border:2px solid var(--color-main);}
input + .shifticon {cursor:pointer;position:relative;left:-30px;color:#9C9C9C;}
input:focus + .shifticon {position:relative;left:-30px;color:var(--color-main);}

ul.structure ul {margin-bottom:20px;margin-top:5px;}


.welcome_header {position:relative;width:calc(100% + var(--sitepadding2));left:calc(0px - var(--sitepadding));text-align:center;padding:20px;background:url('/survey/images/rokt_lines.png') var(--color-main-darker) no-repeat;background-size:cover;}




/* RESULTS */
.resultstable2 {border-collapse: separate;}
.resultstable2 tr th {font-size:0.8em;text-align:left;}
.resultstable2 tr td {border-collapse: separate;min-width:20px;font-size:0.7em;text-align:center;border-bottom:1px solid #EEEEEE;color:white;}
.resultstable2 tr.thcen th {text-align:center;}




/* RESULTS */
.resultstable {border-collapse: separate;
    border-radius: 10px; }
.resultstable tr th {font-size:0.8em;text-align:left;}
.resultstable tr td {border-collapse: separate;
    border-radius: 10px;min-width:20px;font-size:0.7em;text-align:center;border-bottom:1px solid #EEEEEE;color:white;}
.resultstable tr.thcen th {text-align:center;}


.sx {background: rgb(142,142,142);
background: -moz-linear-gradient(0deg, rgba(142,142,142,0.2) 0%, rgba(142,142,142,0.01) 100%);
background: -webkit-linear-gradient(0deg, rgba(142,142,142,0.2) 0%, rgba(142,142,142,0.01) 100%);
background: linear-gradient(0deg, rgba(142,142,142,0.2) 0%, rgba(142,142,142,0.01) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8e8e8e",endColorstr="#8e8e8e",GradientType=1);}
.semployee {background:url('/survey/images/no_employee_survey.gif') center bottom no-repeat;}
.sleader {background:url('/survey/images/no_leader_response.gif') center bottom no-repeat;}
.s0 {
background: rgb(0,0,0);
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%);
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
.s1 {background: rgb(153,0,0);
background: -moz-linear-gradient(0deg, rgba(153,0,0,1) 0%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(153,0,0,1) 0%, rgba(255,0,0,1) 100%);
background: linear-gradient(0deg, rgba(153,0,0,1) 0%, rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#990000",endColorstr="#ff0000",GradientType=1);}
.s2 {background: rgb(153,90,0);
background: -moz-linear-gradient(0deg, rgba(153,90,0,1) 0%, rgba(255,154,0,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(153,90,0,1) 0%, rgba(255,154,0,1) 100%);
background: linear-gradient(0deg, rgba(153,90,0,1) 0%, rgba(255,154,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#995a00",endColorstr="#ff9a00",GradientType=1);}
.s3 {background: rgb(34,153,0);
background: -moz-linear-gradient(0deg, rgba(34,153,0,1) 0%, rgba(52,255,0,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(34,153,0,1) 0%, rgba(52,255,0,1) 100%);
background: linear-gradient(0deg, rgba(34,153,0,1) 0%, rgba(52,255,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#229900",endColorstr="#34ff00",GradientType=1);}
.s4 {background: rgb(0,80,138);
background: -moz-linear-gradient(0deg, rgba(0,80,138,1) 0%, rgba(0,161,255,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(0,80,138,1) 0%, rgba(0,161,255,1) 100%);
background: linear-gradient(0deg, rgba(0,80,138,1) 0%, rgba(0,161,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00508a",endColorstr="#00a1ff",GradientType=1);}
.s5 {background: rgb(138,0,125);
background: -moz-linear-gradient(0deg, rgba(138,0,125,1) 0%, rgba(255,0,245,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(138,0,125,1) 0%, rgba(255,0,245,1) 100%);
background: linear-gradient(0deg, rgba(138,0,125,1) 0%, rgba(255,0,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8a007d",endColorstr="#ff00f5",GradientType=1);}


.resultslegend {border-collapse: separate;
    border-radius: 10px;font-size:0.8em;}
.resultslegend tr td {border-collapse: separate;
    border-radius: 10px;min-width:20px;}
/* RESULTS */




















.flexwrap {
	display:flex;
	flex-wrap: wrap;
	margin-top: 0;
	gap: calc(24 / 16 * 1em);
	row-gap: calc(24 / 16 * 1em);
	list-style:none;
	margin:0 20px;
	padding:0;

}

.flexbox {
	
	
    display: flex;
    flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-items: stretch;
    justify-content: center;
    height: 100%;
	
	
	}

.flexcontent {
	
	border: 1px solid #e5e5e5;
	background-color: white;
	border-radius: 10px;
	padding:20px;
	box-shadow:0px 30px 30px -20px rgba(100,100,100,0.1);
}

.box {

	/*height: 100%;*/
	
}

.boxcontent {
	
	border: 1px solid #e5e5e5;
	background-color: white;
	border-radius: 10px;
	padding:20px;
	box-shadow:0px 30px 30px -20px rgba(100,100,100,0.1);
}

.overview tr th {text-align:left;font-size:0.6em;padding:5px 2px;}
.overview tr:hover td {cursor:pointer;background-color:#EEEEEE;}
.overview tr td {border-bottom:1px solid #EEEEEE;font-size:0.8em;padding:3px;}
.overview tr.on td {background-color:var(--color-light);}
.mgr, .dr {color:var(--color-main);font-size:11pt;text-decoration:underline;cursor:pointer;}





.my_manager_name {font-size:15px;border:1px solid #EEEEEE;border-radius:10px;padding:10px 20px;color:gray;}
.my_name {display:block;text-decoration:none;color:gray;font-size:18px;padding:10px 20px 20px 20px;}
.my_name {color:gray !important;}
.my_name.on {color:var(--color-main) !important;}

.my_dr {font-size:14px;border:1px solid #EEEEEE;border-radius:10px;padding:10px 20px;color:gray;margin-bottom:10px;}






.num {float:left;height:32px;border:1px solid red;width:20px;}

.maincontent table.survey {margin-top:50px;margin-bottom:10px;}
.maincontent table.survey tr td {vertical-align:top;}
.maincontent textarea {margin-top:20px;margin-bottom:20px;border-radius:10px;padding:10px;width:100%;height:200px;font-size:1.2em;font-family:var(--font-regular);}

.maincontent input[type=submit] {background-color:var(--color-main);padding:5px 20px;color:white;border:2px solid var(--color-main);border-radius:50px;cursor:pointer;font-family:var(--font-regular);font-size:1em;font-weight:normal;}


select {border:1px solid var(--color-gray);border-radius:10px;padding:10px;font-size:1.2em;font-family:var(--font-regular);}


.buttonoutlines {margin-bottom:20px;text-align:center;}
.buttonoutlines .link  {cursor:pointer;display:inline-block;border:2px solid var(--color-main);border-radius:50px;color:gray;background-color:white;text-decoration:none;padding:5px 20px;margin-bottom:10px;}

.buttonoutlines .on,.buttonoutlines .link.on {color:white;background-color:var(--color-main);border:2px solid var(--color-main-darker);}



.submit {cursor:pointer;display:inline-block;border:2px solid var(--color-main);border-radius:50px;color:white;background-color:var(--color-main);text-decoration:none;padding:5px 20px;}



label input[type=radio] {margin-bottom:10px;}
/*label input[type=radio] {transform: scale(2);margin-bottom:10px;}*/
label input[type=radio]:after {
		cursor:pointer;
        width: 24px;
        height: 24px;
        border-radius: 24px;
        top: -7px;
        left: -9px;
        position: relative;
        background-color: var(--color-silver);
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

label input[type=radio]:checked:after {
		cursor:pointer;
        width: 24px;
        height: 24px;
        border-radius: 24px;
        top: -7px;
        left: -9px;
        position: relative;
        background-color: var(--color-main);
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
		
    }
/* COLUMNS */
.empbox {white-space:nowrap;}
.surveybox {width: calc(100% - var(--gutter));}

.maincontent {font-size:1em;width:100%;vertical-align:top;background:url('/survey/images/rokt-connector-light-blue.svg') top center no-repeat;background-size:contain;}
label {cursor:pointer;text-align:center;float:left;width:24%;font-size:1em;}

.surveyfor1 {display:inline-block;}
.surveyfor2 {display:none;}

/*
.surveyfor1 {display:none;}
.surveyfor2 {display:block;padding-bottom:5px;}

*/

@media only screen and (max-width: 700px) {
.maincontent {font-size:0.9em;}
.surveybox {width:calc(100% - var(--gutter));}
label {font-size:0.8em;}
.survey tr td {font-size:1em;}
.empbox {width:calc(100% - var(--gutter));}



}

/* COLUMNS */

.buttonoutlines2 {color:white;background-color:var(--color-main);border:2px solid var(--color-main-darker);text-align:left;}
.surveyname {display:block;color:white;padding:10px;}
.surveyname:hover {background-color:var(--color-main-darker);}
.surveyname.on {background-color:black;}

.statusdrop tr.heading th {background-color:#EEEEEE;}
.statusdrop tr th {padding:15px 5px;}
.statusdrop tr td {padding:10px 5px;}
.statusdrop1 {width:20px;}

		
.resultslegend2 td {font-size:10pt;}