/* CSS Document */

/*General*/
.forminput_fullwidth{
	width: 100%;
}

/*Labels*/
.smlabel{
	line-height: 1.25em;
	font-weight: 600;
}

/*Buttons*/
.smbutton {
	/*-webkit-border-radius: 3;
	-moz-border-radius: 3;
	border-radius: 3px; /*3.0 Eliminating rounded edges*/
	color: #ffffff;
	font-size: 16px;
	padding: 6px 20px 6px 20px;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	text-shadow: 1px 1px #343434;
}

.smbutton.bg_dark_blue{
	background: rgb(41,108,243);
	background: -webkit-linear-gradient(left, rgba(146,39,143,1) 0%, rgba(41,108,243,1) 100%);
	background: -o-linear-gradient(left, rgba(146,39,143,1) 0%, rgba(41,108,243,1) 100%);
	background: linear-gradient(to right, rgba(146,39,143,1) 0%, rgba(41,108,243,1) 100%);
}
/* 3.0 - eliminating button hover states
.smbutton:hover {
	color: #d8d8da;
	text-decoration: none;
}

.smbutton.bg_middle_teal:hover {
	background: #35646e;
}

.smbutton.bg_data_red:hover {
	background: #803636;
}

.smbutton.bg_data_blue:hover {
	background: #53b8b8;
}

.smbutton.bg_dark_blue:hover {
	background: #0c225e;
}
*/


/*Menus - NOTE: To auto-add the arrow, place this option in the jQuery menu intialization:

position: {
          my: "left+35 top",
          at: "right top-10",
          using: function( position, feedback ) {
            $( this ).css( position );
            if( ! $(this).find('> div.arrow').length){
              var id = Math.random().toString(36).substring(7);
              $( "<div id='" + id + "'>" )
                .addClass( "arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
              $('head').append('<style id="smmenu_style-' + id + '" type="text/css">#' + id + '.arrow:after{ top: ' + ($('#' + id).closest('li').offset().top - $('#' + id).closest('ul').offset().top + 7.5) + 'px !important; }</style>'); //7.5 is half the triangle height
            }
          }
}
*/
.smmenu, .smmenu .ui-menu { 
	width: 200px; 
}
.smmenu .ui-menu-item{
	padding-top: 15px !important;
	padding-bottom: 5px !important;
	line-height: 1.5em;
}
.smmenu .ui-menu-item.ui-state-focus, .smmenu .ui-menu-item.ui-state-active{
	background: none !important;
	border: 0px !important;
	color: #3862e4 !important;
	border-bottom: 1px solid #3862e4 !important;
}
.smmenu, .smmenu .ui-menu{
	background: rgb(41,108,243) !important;
	border: 2px solid rgb(41,108,243) !important;
	border-radius: 2px !important;
	padding: 10px 20px !important;
	font-size: 1em !important;
}
.smmenu, .smmenu .ui-menu, .smmenu a{
	color: white !important;
}
.smmenu .ui-menu-divider{
	border: none !important;
}
.smmenu{
	position:relative;
}
.smmenu:after {
	border-bottom: 15px solid rgb(41,108,243);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	width: 0;
	height: 0;
	
	content: "";
	display: block;
	position: absolute;
	top: -15px;
	left: calc(50% - 15px);
	z-index: 9999;
}

.smmenu .arrow:after {
	border-right: 15px solid rgb(41,108,243);
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	width: 0;
	height: 0;
	
	content: "";
	display: block;
	position: absolute;
	top: 15px;
	left: -15px;
	z-index: 9999;
}

/*Tooltip*/
.smtooltip{
	background: rgb(41,108,243) !important;
	border: 2px solid rgb(41,108,243) !important;
	border-radius: 2px !important;
	padding: 10px 20px !important;
	font-size: 1em !important;
	color: white !important;
}

.smtooltip.tooltip_error{
	background: #893939 !important;
	border: 2px solid #893939 !important;
}

.smtooltip .ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}


.smtooltip.switch-left .ui-tooltip-content::after {
    top: calc(50% - 15px);
    left: -15px;
    border-color: transparent rgb(41,108,243);
    border-width: 15px 15px 15px 0;
}
.smtooltip.switch-left.tooltip_error .ui-tooltip-content::after {
	border-color: transparent #893939;
}
.smtooltip.switch-right .ui-tooltip-content::after {
    top: calc(50% - 15px);
    right: -15px;
    border-color: transparent rgb(41,108,243);
    border-width: 15px 0 15px 15px;
}
.smtooltip.switch-right.tooltip_error .ui-tooltip-content::after {
	border-color: transparent #893939;
}
.smtooltip.switch-bottom .ui-tooltip-content::after {
    bottom: -15px;
    left: calc(50% - 15px);
    border-color: rgb(41,108,243) transparent;
    border-width: 15px 15px 0;    
}
.smtooltip.switch-bottom.tooltip_error .ui-tooltip-content::after {
	border-color: #893939 transparent;
}
.smtooltip.switch-top .ui-tooltip-content::after {
    top: -15px;
    left: calc(50% - 15px);
    border-color: rgb(41,108,243) transparent;
    border-width: 0 20px 20px;
}
.smtooltip.switch-top.tooltip_error .ui-tooltip-content::after {
	border-color: #893939 transparent;
}

/*Breadcrumbs*/
.smbreadcrumbs{
	border: thin solid #3862e4; /*data_blue*/
	padding-left: 15px;
	padding-right: 15px;
	height: 2em;
	line-height: 2em;
	text-transform: uppercase;
	z-index: 1;
}

.smbreadcrumbs.active{
	color: #D2D2D2; /*light_grey*/
}

.smbreadcrumbs a{
	color: #0E2A7B !important; /*dark_blue*/
}

.smbreadcrumbs ol{
	padding-left: 0;
}

.smbreadcrumbs li{
	float: left; 
	display: inline;
	margin-right: 1.25em;
}

/*Text Inputs*/
.smtextinput {
	border-radius: 0px;
	width: 100%;
	display: inline-block;
	padding: 7px 10px;
	border: 2px solid #D2D2D2;
	font: normal 1em/normal "Roboto-Regular", Monaco, monospace;
	font-family: "Roboto-Regular" !important;
	color: #111;
	-o-text-overflow: clip;
	text-overflow: clip;
	background: rgba(252,252,252,1);
	text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.smtextinput:focus, .smtextinput:hover {
	border: 2px solid rgb(41,108,243);
	color: rgb(41,108,243);
	border-radius: 0px;
	outline: none;
}

.smtextinput.error:focus{
	border: 2px solid #893939 !important;
	color: #893939 !important;
	border-radius: 0px;
	outline: none;
}

.smtextinput:disabled {
	border: 0px !important;
	color: #6E6E6E !important;
	background-color: #D2D2D2;
	
}


/*Checkboxes and Radios - NOTE: These requires the following to be added at the beginning of the corresponding label tag: '<span><span></span></span>'*/
.smcheckbox, .smradio{
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1.5em;
  opacity   : 0;
}
.smcheckbox + label, .smradio + label{
  display      : inline-block;
  margin-left: -2em;
  line-height  : 1.75em;
  color: #0E2A7B;
}
.smcheckbox + label > span{
  display          : inline-block;
  width            : 1.3125em;
  height           : 1.3125em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid #D2D2D2;
  border-radius    : 1px;
  background       : #D2D2D2;
  vertical-align   : top;
}

 .smradio + label > span{
  display          : inline-block;
  width            : 1.3125em;
  height           : 1.3125em;
  margin           : 0.24em 0.5em 0.15em 0.25em;
  border           : 0.1875em solid #D2D2D2;
  border-radius    : 500px;
  background-color:rgba(0, 0, 0, 0.0);
  vertical-align   : top;
}

.smradio:checked + label > span{
   border: 0.1875em solid rgb(41,108,243);
}

.smcheckbox:checked + label > span:before{
  background: rgb(41,108,243);
}

/*.smcheckbox:not(:disabled):hover + label > span:before, .smcheckbox:checked + label > span:before{*/
.smcheckbox:checked + label > span:before{
  content     : 'X';
  display     : block;
  width       : 1em;
  color       : white;
  font-size   : 1.3125em;
  line-height : 1em;
  text-align  : center;
  font-weight : bold;
}

/*.smradio:not(:disabled):hover + label > span:before, .smradio:checked + label > span:before{*/
.smradio:checked + label > span:before{
  content     : '•';
  display     : block;
  width       : .65em;
  font-size   : 1.5em;
  line-height : .6em;
  text-align  : center;
  font-weight : bold;
}

/*.smradio:not(:disabled):hover + label > span:before{
  color: #D2D2D2;
}*/

.smradio:checked + label > span:before{
  color       : rgb(41,108,243);
}

.smcheckbox:checked + label, .smradio:checked + label{
  color: rgb(41,108,243);
}

.smcheckbox:disabled + label, .smradio:disabled + label{
  color: #D2D2D2;
}


/*Tooltips - NOTE: To auto-add the arrow place this option in the jQuery UI tooltip initialization
position: {
        my: "center bottom-20",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
*/

.smtooltip, .arrow:after {
	background: rgb(41,108,243);
	border: 2px solid rgb(41,108,243);
	border-radius: 2px;
}
.smtooltip {
	padding: 10px 20px;
	color: white;
	border-radius: 2px;
	font: bold 1em;
}
.arrow {
	width: 70px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}
.arrow.top {
	top: -16px;
	bottom: auto;
}
.arrow.left {
	left: 20%;
}
.arrow:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.arrow.top:after {
	bottom: -20px;
	top: auto;
}


/*Toggle Switch - NOTE: Use the following HTML:
<div class="smtoggle">
    <input type="checkbox" name="smtoggle" class="smtoggle-checkbox" id="myonoffswitch" checked>
    <label class="smtoggle-label" for="myonoffswitch">
        <span class="smtoggle-inner"></span>
        <span class="smtoggle-switch"></span>
    </label>
</div>
*/

.smtoggle {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.smtoggle-checkbox {
    display: none;
}
.smtoggle-label {
    display: block; overflow: hidden; cursor: pointer;
    border-radius: 20px;
}
.smtoggle-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.smtoggle-inner:before, .smtoggle-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.smtoggle-inner:before {
    content: "ON";
    padding-left: 16px;
    background-color: rgb(41,108,243); color: #FFFFFF;
}
.smtoggle-inner:after {
    content: "OFF";
    padding-right: 16px;
    background-color: #D2D2D2; color: #FFFFFF;
    text-align: right;
}
.smtoggle-switch {
    display: block; width: 18px; margin: 6px;
    background: #3862e4;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.smtoggle-checkbox:checked + .smtoggle-label .smtoggle-inner {
    margin-left: 0;
}
.smtoggle-checkbox:not(:checked) + .smtoggle-label .smtoggle-switch{
  background-color: #6E6E6E;
  
}
.smtoggle-checkbox:checked + .smtoggle-label .smtoggle-switch {
    right: 0px; 
}


/*Select*/
.smselect_simple{	
	-webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 10px;
    padding-right: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: 2px solid #D2D2D2;
    border-radius: 0px;
    overflow: hidden;
    background-image: url(../images/arrow-down-black-thick.png);
    background-size: auto 7.5px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.66);
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    font: normal 1em/normal "Roboto-Regular", Monaco, monospace;
    font-family: "Roboto-Regular" !important;
}


.smselect{
  	/*-webkit-appearance:none;
	-moz-appearance: none;
	background-color: white;
	color: #343434;
	padding-left: 10px;  
	padding-right: 58px;
	font-size: 15px;
	line-height: 25px;
	border: 2px solid #D2D2D2;
	border-radius: 0px;
	height: 30px;
	overflow: hidden;
	background-image: url('../images/other/select_arrow_v2.png');
	background-size: auto 30px;
	background-repeat: no-repeat;
	background-position: right;*/
	
	-webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    padding-left: 10px;
    padding-right: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: 2px solid #D2D2D2;
    border-radius: 0px;
    overflow: hidden;
    background-image: url(../images/other/select_arrow_v2.png);
    background-size: auto 30px;
    background-repeat: no-repeat;
    background-position: right;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.66);
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    font: normal 1em/normal "Roboto-Regular", Monaco, monospace;
    font-family: "Roboto-Regular" !important;
    color: #111;
}

.smselect:focus{
	border: 2px solid rgb(41,108,243);
	border-radius: 0px;
	outline: none;
}

.smselect option{
	background-color: #d7d7d7;
	color: black;
}

.smselect option:hover{
	background-color: #343434;
}

.smselect, .smselect+label{
	opacity: 0.75;
}

.smselect:hover, .smselect:hover+label{
	opacity: 1;
}

.smselect.compact{
	max-width: 150px;
}

select::-ms-expand {/*fix for custom select in IE 10*/
    display: none;
}

/*Fieldset*/
.smfieldset{
	/*border: thin solid rgb(41,108,243); /*data_blue*/ /*rgb(41,108,243); middle_teal*/
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-top: 5px;
}

.smfieldset legend{
	border: none;
	font-size: 1.5em;
	font-weight: 400;
	width: inherit;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	text-transform: uppercase;
	margin-bottom: 5px;
	background-color: white;
}


/*Tabs*/
.smtabs{
	border-radius: 0 !important;
}



/*Charts*/
.smchart-legend{
	list-style-type: none;
	display: inline-block;
	-webkit-padding-start: 0px;
}

.smchart-legend li{
	float: left;
	display: inline;
	padding-right: 20px;
}

.smchart-legend-color_block{
	width: 24px;
	height: 24px;
	display: inline-block;
	margin-right: 8px;
}

@media (max-width: 492px){
	.smchart-legend li{
		padding-right: 5px;
		margin-bottom: 5px;
		float: clear;
		display: block;
		width: 100%;
	}
	
	.smchart-legend-color_block{
		width: 20px;
		height: 20px;
		margin-right: 3px;
		
	}
	
	.smselect_simple{	
		padding-right: 48px;
	}
}

/*Errors*/
.smerror{
	box-shadow: 1px 1px 3px #F15860,
				-1px -1px 3px #F15860,
				1px -1px 3px #F15860,
				-1px 1px 3px #F15860;
}

.ui-datepicker-year{
	color: black !important; /*jquery ui theme fix*/
}