/* FOR INSTITUTIONS WIDGET */
body, table {
	font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 10px;
	background-color: white;
	font-size: 9pt;
}

form#widgetconfig-id p {
    font-size: 9pt;
    color: #333;
}

tr{
	padding: 3vw 0;
	display: block;
}

td.listing a:link, td.listing a:visited, td.facility a:link, td.facility a:visited {
 	color: #0f75bc; 
}

div#widget-container {
    border-left: .5px solid lightblue;
    border-right: .5px solid lightblue;
    border-bottom: .5px solid lightblue;
}
 

div#header p {
    color: white;
    padding: 2vw;
    font-size: 11pt;
    font-weight: 400;
    text-transform: uppercase;
}

div#header {
    background-color: #444;
    border-radius: 3px 3px 0 0;
}

td.services {
    width: 300px;
}

td.facility {
    width: 250px;
}

td.rrid {
    width: 25%;
    text-align: center;
}

td.listing {
    width: 20%;
    text-align: right;
    padding-right: 2vw;
}

.breadcrumb {
    padding: 1vw 2vw;
}

div#EmbedResults {
    height: 400px;
    overflow: overlay;
   /* 
 border-left: 1px solid aliceblue;
    border-right: 1px solid aliceblue;
    border-bottom: 1px solid aliceblue;
 */
}

.widget_bottom img {
    height: 40px;
}

.widget_bottom {
    padding: 1em;
    border-top: .5px solid lightblue;
}

/* END WIDGET */

#container {
	height: auto;
}

div#widgetCode p#instructions i {
    font-size: 12pt;
    cursor: pointer;
    padding: 1vw;
    border-radius: 10px;
}

div#widgetCode p#instructions i:hover {
	background-color: #ddd;
	color: white;
}

div#widgetCode p#instructions i:active {
	background-color: #1c75bc;
	color: white;
}

span.feedback-bubble {
    margin-left: 1vw;
    text-transform: lowercase;
    font-size: 9pt;
    font-family: 'Roboto';
}

#widgetCode p {
    padding: 0 3vw;
}

#widgetCode {
	font-size: 10pt;
}

#widgetCode #widgetEmbed {
	font-size: 14pt;
	color: black;
}

pre {
    padding: 1vw 3vw;
    background-color: aliceblue;
    white-space: break-spaces;
}

p#pre-instructions {
    font-size: 9pt;
    font-style: italic;
    color: black;
}

span.pre-instructions {
    margin-bottom: 2vw;
    /* background-color: aliceblue; */
}

div.RequestHeader {
    padding: 1vw;
    background-color: #444;
    border-radius: 3px 3px 0 0;
}

p.request {
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

p.request.Configure img {
    height: 25px;
    vertical-align: middle;
}

p.request.Configure i {
    margin: 0 .25vw;
}

.RequestHeader a {
    color: white;
    word-break: break-word;
}

div#widgetConfig {
    border-left: solid lightblue 1px;
    border-right: solid lightblue 1px;
    border-bottom: solid lightblue 1px;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

span.widget-row {
    /* display: inline; */
    /* margin: 2vw; */
    font-size: 10pt;
    width: 100%;
    /* background-color: lightblue; */
    padding: 1vw 2vw;
    /* float: left; */
}

.widget-row p {
    /* display: inline; */
    margin-left: 10px;
}

span.icon-illustration {
    padding: 2vw 4vw;
    margin: auto;
    display: block;
}

div.icon-group img {
    height: 30px;
    width: 30px;
    margin:auto;
}

span.icon-illustration {
    padding: 2vw 4vw;
    margin: 0 auto;
    display: inline-flex;
    width: 85%;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

span.icon-illustration div.icon-group {
    display: inline;
}

div.icon-group p {
    text-align: center;
}

div.icon-group {
    margin: 0 2vw;
}

div.icon-group i {
    font-size: 16pt;
    color: #1c75bc;
}

span#widget-row li {
    list-style: decimal;
    font-size: 9pt;
}

.icon-group {
    font-size: 8pt;
    text-align: center;
}

span#widget-row p {
    font-size: 10pt;
    color: #333;
}

div#widgetConfig h5, div#widgetConfig h1,div#widgetConfig h2,div#widgetConfig h3,div#widgetConfig h4,div#widgetConfig h6 {
    color: #1c75bc;
    margin: 0;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
	
	div#widgetConfig {
		flex-direction: row;
	}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	
	p.request.Configure i {
		margin: 0 2vw;
	}

	div#widgetConfig {
		flex-direction: row;
	}
	
	div#widgetConfig input {
		max-width: 225px;
	}
	
	pre {
	    white-space: break-spaces;
	    line-break: anywhere;
	}
	
	div#widgetCode p#instructions i {
	    padding: 2vw;
	    border-radius: 6px;
	}
	
	.RequestHeader a:link, .RequestHeader a:visited {
		color: #fff;
	}
  
}