.widget.sporthopper-drawing-controls { width: auto; float: none; padding: 0; margin: 0; }
.widget.sporthopper-drawing-controls .widget-content { padding: 0; margin: 0; }
.widget.sporthopper-drawing-controls .steps .step-item { 
	display: inline-block; 
	background-color: #F3F3F3; 
	border: 1px solid #D6D6D6; 
	border-radius: 5px; 
	color: #D6D6D6;
	margin: 7px;
	padding: 10px; 
}
.widget.sporthopper-drawing-controls .steps .step-item.complete { cursor: pointer; border-color: #000000; background-color: #FFFFFF; color: #000000; }
.widget.sporthopper-drawing-controls .steps .step-item.current { cursor: pointer; border-color: #EE7202; color: #EE7202; background-color: #FFE1C9; }
.widget.sporthopper-drawing-controls .step-container { border-top: 1px solid #D6D6D6; margin-top: -25px; padding: 10px; padding-top: 30px; }

.company-instances-in-periods table { width: 100%; border-collapse: collapse; border: 1px solid #000; }
.company-instances-in-periods table tr:nth-child(even) { background-color: #f9f9f9; }
.company-instances-in-periods table th { vertical-align: bottom; }
.company-instances-in-periods table th.period-column { width: 115px; }
.company-instances-in-periods table th,
.company-instances-in-periods table td { padding:3px; border: 1px solid #ccc; }
.company-instances-in-periods table td.period-column { text-align: right; }




.subscription-period-base-card .show-when-use-drawing { display:none; }
.subscription-period-base-card.use-drawing .show-when-use-drawing { display: block; }
.subscription-period-base-card.use-drawing .hide-when-use-drawing { display: none; }

.subscription-period-base-card .show-when-use-post-subscription { display: none; }
.subscription-period-base-card.use-post-subscription .show-when-use-post-subscription { display: block; }
.subscription-period-base-card.use-post-subscription .hide-when-use-post-subscription { display: none; }

.subscription-period-base-card .show-when-use-subscription-until-start { display: none; }
.subscription-period-base-card.use-subscription-until-start .show-when-use-subscription-until-start { display: block; }
.subscription-period-base-card.use-subscription-until-start .hide-when-use-subscription-until-start { display: none; }

.subscription-period-base-card .arrow { background: #000; height: 3px; width: 30px; position: relative; }
.subscription-period-base-card .arrow:before, .arrow:after { content: ""; background: #000; position: absolute; height: 2px; width: 15px; }
.subscription-period-base-card .arrow:before { right: -3px; bottom: -5px; transform: rotate(-45deg); }
.subscription-period-base-card .arrow:after { right: -3px; top: -4px; transform: rotate(45deg); }

.subscription-period-base-card .arrow-spacer { width: 65%; height: 60px; position: relative; }
.subscription-period-base-card .arrow-spacer .arrow { transform: rotate(90deg); position: absolute; bottom: 30px; }

.period-statistics-tab .table-container { width: 600px; margin-bottom: 50px; }
.period-statistics-tab table { width: 100%; border-collapse: collapse; border: 1px solid #000; }
.period-statistics-tab table .count-column { min-width: 60px; text-align:right; }
.period-statistics-tab table th,
.period-statistics-tab table td { padding: 5px 10px; border-bottom: 1px dotted gray }
.period-statistics-tab table th { font-weight: normal; }
.period-statistics-tab table tr.segment-specific td:first-child { padding-left: 20px; font-style: italic; }
.period-statistics-tab table tr.header-row th { font-weight:bold; }
.period-statistics-tab table tr:first-child th { padding-top: 20px; }
.period-statistics-tab table tr:last-child td { padding-bottom: 20px; }