html, body {font-family: roboto_slabregular;font-weight:normal;font-size:14px;margin: 0px;padding: 0px}
pre{border:0;white-space:pre-wrap}
label{color: #58534f!important;font-size: 12px;margin-bottom: 5px;font-weight: bold!important;float: left;width: 200px;text-align: left;min-height: 30px;padding: 0px 5px 0 0px;align-items: center}

.transparencyhub_container{margin-top:0}
.a_details ul{list-style-type:decimal}
.a_details ul li{color:#505050;font-size:18px;font-weight:100;width:100%;margin:0;margin-top:-4px;padding:10px 0}
#hostname{text-transform:lowercase}
.copy-content-button{position:absolute;top:5px;cursor:pointer;background:url(../icons/copy/web/ic_content_copy_black_24dp_1x.png) no-repeat center center;width:30px;height:30px}
.download-button{position:absolute;top:5px;cursor:pointer;background:url(../icons/download/web/ic_file_download_black_24dp_1x.png) no-repeat center center;width:30px;height:30px}
md-list-item .md-no-style,md-list-item.md-no-proxy{padding:0;padding-right:40%}
pre{outline:0}
.md-button.md-fab{box-shadow:none;width:40px;height:40px}
.md-button.md-fab,a.md-button.md-fab{background-color:transparent}
.md-button.md-fab:not([disabled]).md-focused,a.md-button.md-fab:not([disabled]).md-focused{background-color:#ddd;box-shadow:none}

#copy-content-button-container{right:70px}
md-tooltip{min-width:50px;text-align:center}
md-progress-linear{position:absolute}
.overflow{overflow:hidden}

/* Toolbar area */
h1{font-family: 'Roboto-Light', sans-serif;font-weight:300}
h5{font-family: 'Roboto-Medium', sans-serif;font-weight:500}
p{line-height:22px!important}
a{color: #f85c70;}

.menu {background-color: transparent;border: none;height: 38px;margin: 16px;width: 36px}
md-toolbar h1 {margin: 20px auto}
.bg-theme{background: #F8F8F8;}

/* Sidenav area */
md-list .md-button {color: inherit;font-weight: 500;text-align: left}
md-list .md-button.selected {color: #03a9f4;}
md-sidenav  md-list {padding: 0px 0px 8px 0px;}

/* Primary content area */
#content{overflow:hidden}
#content{padding-left:40px;padding-right:40px;padding-top:5px}
#content .md-button.contact{background-color:transparent;border:none;width:48px;height:48px;margin:8px auto 16px 0;position:absolute;top:10px;right:40px}
#content md-icon.avatar{margin-top:10px}
#content .md-button.contact>md-icon{fill:#000;width:36px;height:36px}
md-button.menuBtn>md-icon{fill:#fff;width:24px;height:24px}
#content .md-button.contact:active>md-icon{background-color:#dadada;border-radius:75%;padding:4px;transition:all .1s ease-out 30ms}
#content img{display:block;height:auto;max-width:500px}

/* Utils */
.content-wrapper {position: relative}

/* Typography support coming in 0.8.0 */
md-toolbar h1{font-size:1.25em;font-weight:400}
.heading{background-color:transparent!important;color:#47807F!important}
.heading h2{margin-bottom:0!important;font-weight: 500;font-size: 28px}
.avatar{position:relative;width:128px;height:128px;border:1px solid #ddd;border-radius:50%;display:inline-block;overflow:hidden;margin:0;vertical-align:middle;zoom:.7;transform:translateZ(0);-webkit-transform:scale(.7);-moz-transform:scale(.7)}
md-bottom-sheet md-icon{margin-right:20px}
span.name{font-weight:700;font-size:1.1em;padding-left:5px}
md-toolbar:not(.md-menu-toolbar){background-color:#344f89;min-height:auto!important}
md-toolbar h1{line-height:50px;display: flex;align-items: center;justify-content: center;height: 100%;font-size:36px;line-height:50px;font-weight:400;color:#fff}
md-toolbar.main-heading{height:250px;/*background:url('../images/headerbg.jpg') no-repeat;background-size:cover*/background: rgb(130,48,156);
background: linear-gradient(90deg, rgba(130,48,156,1) 30%, rgba(35,52,156,1) 100%);}
.dividerdemoBasicUsage .face{border-radius:30px;border:1px solid #ddd;width:48px;margin:16px}
#request-form md-toolbar:not(.md-menu-toolbar),#result md-toolbar:not(.md-menu-toolbar),.question_answer_area md-toolbar:not(.md-menu-toolbar){background-color:#24375d}
.question_answer_area md-toolbar:not(.md-menu-toolbar){margin-bottom:10px}
.inputdemoBasicUsage .md-datepicker-button{width:36px}
.listdemoBasicUsage md-divider{margin-top:10px;margin-bottom:10px}
.inputdemoErrors .inputErrorsApp{min-height:48px}
a.md-button.md-fab:not([disabled]):hover, .md-button.md-fab:not([disabled]):hover {background-color: rgb(214 212 212)!important;}
.copy-content-button{left: 5px}

/************** Result **************/
.result h2{margin:0;font-family: 'Roboto-Medium', sans-serif;font-weight: 500;}
.result .resultdesc{margin-bottom:0;max-height: 250px;overflow-y: auto;overflow-x: hidden;border-color: #e1e1e2;min-width:610px}
.result {margin-top: 15px;background: #F6F6F6;padding: 20px;border-radius: 0px;overflow:hidden}
.result pre{background:#fff!important}
.result h5{margin-bottom:10px;color:#58534f}
/*.result:hover{box-shadow: 0px 2px 4px rgba(46,41,51,0.08), 0px 4px 10px rgba(71,63,79,0.16);-webkit-box-shadow: 0px 2px 4px rgba(46,41,51,0.08), 0px 4px 10px rgba(71,63,79,0.16);transition:0.2s ease-in-out;-webkit-transition:0.2s ease-in-out;-moz-transition:0.2s ease-in-out;-ms-transition:0.2s ease-in-out;-o-transition:0.2s ease-in-out}*/
/************** End Result **************/

/********** Input filed *********/
input,input[type=text]{color:#555;width:100%!important;font-size:15px;line-height:normal;border:#e8e8e8 solid 
1px;border-width:1px!important;border-radius:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;line-height: 18px;padding:7px 10px !important;-webkit-appearance:none;-moz-appearance:none;background:#fff!important;line-height:18px!important;font-size: 13px!important;}
input:focus,select:focus{outline:0!important;color:#555!important;border-color:rgba(0,0,0,0.12)!important;z-index:2}

.card_input{width: 350px;margin: 0px!important;display: inline-block;}

md-input-container .md-placeholder, md-input-container label:not(.md-no-float){transform:none!important;margin-bottom:5px;color: rgba(0,0,0,0.66);transition: none !important;}
md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float){transform:none!important}
md-input-container label span{color:#F44336}
md-input-container label span.subtext{color:#999999;display: contents;font-weight: 400;font-size: 12px;line-height: 16px}
md-input-container{padding:0px;margin-bottom:15px;display: block}

md-input-container md-select{border: #e8e8e8 solid 1px;padding: 0px 10px 6px !important;background:#fff!important;font-size: 13px!important;display: inline-block;width: 100%;margin: 0;color: #58534f !important}
md-input-container:not(.md-input-invalid).md-input-focused label{color:#333!important}
md-input-container:not(.md-input-invalid).md-input-focused .md-input{border-color:rgba(0,0,0,0.12)!important}
md-select .md-select-value{border: 0;padding: 0}
md-select:not([disabled]):focus .md-select-value{border:0!important}
md-select .md-select-value.md-select-placeholder, md-input-container:not(.md-input-invalid).md-input-has-value label{color: rgba(0,0,0,0.66)}
md-input-container .md-placeholder{opacity:1}
md-select-value .md-select-icon:after{color: rgba(0,0,0,0.64);right: -5px}
md-input-container.md-input-invalid .md-input {border-color: rgb(244,67,54)!important}
/********** End Input filed *********/

md-default-theme{background: #F8F8F8;}
md-list-item.md-3-line,md-list-item.md-3-line>.md-no-style{height:auto;position:relative;padding-right:100px}
.md-whiteframe-4dp,.md-whiteframe-z2{box-shadow:none}
md-list-item .md-list-item-inner .md-secondary,md-list-item .md-list-item-inner .md-secondary-container,md-list-item .md-secondary,md-list-item .md-secondary-container{margin-left:16px;position:absolute;right:16px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
md-list-item.md-2-line .md-list-item-text,md-list-item.md-2-line>.md-no-style .md-list-item-text,md-list-item.md-3-line .md-list-item-text,md-list-item.md-3-line>.md-no-style .md-list-item-text{padding:10px}
.md-button{border-radius:3px;box-sizing:border-box;color:currentColor;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;outline:0;border:0;display:inline-block;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:0 6px;margin:6px 8px;line-height:36px;min-height:36px;background:0 0;white-space:nowrap;min-width:88px;text-align:center;text-transform:uppercase;font-weight:500;font-size:14px;font-style:inherit;font-variant:inherit;font-family:inherit;text-decoration:none;cursor:pointer;overflow:hidden;transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}
.md-button{letter-spacing:.01em}
button,input,select,textarea{font-size:100%}
md-list md-list-item.md-2-line .md-list-item-text p,md-list md-list-item.md-3-line .md-list-item-text p{max-width:60%}

md-input-container:not(.md-input-has-value) input:not(:focus), md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field, md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field {
  color:white;
}
md-progress-circular{top:-30px!important}
md-progress-circular .md-inner .md-right .md-half-circle {border-right-color: #2C6273!important}
md-progress-circular .md-inner .md-left .md-half-circle, md-progress-circular .md-inner .md-right .md-half-circle {border-top-color: #2C6273!important}
md-progress-circular .md-inner .md-gap {border-top-color: #2C6273;border-bottom-color: #2C6273}
md-progress-circular .md-inner .md-left .md-half-circle {border-left-color: #2C6273}
md-input-container [data-ng-messages], md-input-container [ng-messages], md-input-container [x-ng-messages], md-input-container data-ng-messages, md-input-container ng-messages, md-input-container x-ng-messages{overflow:hidden}
md-progress-linear .md-container {background-color: rgb(44 98 115 / 0.5)}
md-progress-linear .md-bar {background-color: #2C6273}

.md-docs-dark-theme{padding-bottom:0}
.hostname_input{width:85%}
.card{background: #F6F6F6}
.card-raw{overflow:hidden;margin-bottom:20px;display: block;}
.card-raw:last-child{margin-bottom:0px}

.csr-form h4{color:#58534f;margin-bottom: 10px}
.csr-form > .ShowResults {margin: 0em 0em 1.3em 3.3em;border-radius: 0;line-height: 22px}
.csr-form>.ShowResults:hover {background: #ff7146 !important}
.btn-copy {background: #ff7146;color: #fff !important;font-weight: normal !important;text-align: center !important;border-radius: 0;margin: 15px 0 0 0}
md-list md-list-item button.md-button:not([disabled]):hover {color:#206272!important;background-color: #ff7146}
.copy-content-button{text-align: center;display: flex}
md-input-container [ng-messages]{min-height: 18px}
md-input-container [ng-message], .hostrequired{padding-top: 3px;font-size:11px;color:#F44336}

.custom-tooltip {width: 50px;text-align: center;font-size: 10px;color: #fff;padding: 4px 5px;right: 14px;top: 8em;position: absolute;border-radius: 3px;opacity:0;background-color: rgba(0,0,0,0.54);transition: 0.2s ease-in-out;-webkit-transition: 0.2s ease-in-out}
.btn-copy:hover + .custom-tooltip {opacity: 1;transition: 0.2s ease-in-out;-webkit-transition: 0.2s ease-in-out}
.probtn{background: #ffc20e !important;font-size: 16px !important;padding: 4px 10px !important;width: 180px !important}

/********** Collapse Panel *********/
#fliphead{cursor: pointer}
#fliphead h3{position:relative}
#fliphead h3:after{content: '';position:absolute;right: 0;top: 9px;border-left: 18px solid transparent;border-right: 18px solid transparent;border-bottom: 18px solid #fff;transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out}
#fliphead h3.activepanel:after{transform: rotate(180deg);-webkit-transform: rotate(180deg);transition: 0.3s ease-in-out;-webkit-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out}
/********** End Collapse Panel *********/

/*========== Commom Class ==========*/
.m-0{margin:0!important}
.mt-0{margin-top:0!important} 
.ml-0{margin-left:0!important}
.mr-0{margin-right:0!important}
.mt-10{margin-top:10px!important}
.mb-0{margin-bottom:0!important}
.p-0{padding:0!important}
.pt-0{padding-top:0!important}
.pl-0{padding-left:0px!important}
.pr-0{padding-right:0px!important}
.pl-10{padding-left:10px!important}
.pb-0{padding-bottom:0!important}
/*========== End Commom Class ==========*/

/*========== Options ==========*/
md-option{height:26px}
md-option .md-text{font-size:13px}
md-select-menu md-option[selected] {color: #FF7146 !important}
md-option:hover {background: #206272;color: #fff}
/*========== End Options ==========*/

@media screen and (max-width:979px){
	md-input-container .md-placeholder, md-input-container label:not(.md-no-float){margin-bottom:0!important}
	.transparencyhub_container{width:auto;margin:0 auto}
	.card-raw{margin-bottom:10px}
	.card_input{width:320px}
	.result .resultdesc{min-width:450px}
}
@media screen and (max-width:767px){
	[role="main"]{padding:0px;}
	p{font-size:12px!important;line-height:18px!important}
	md-input-container{margin-bottom:15px}
	md-toolbar.main-heading{height:100px}
	md-toolbar h1{font-size:24px}
	md-list-item.md-3-line, md-list-item.md-3-line>.md-no-style{padding-right:50px}
	input, input[type=text], md-input-container>md-select{padding:4px 10px !important}
	md-input-container .md-placeholder, md-input-container label:not(.md-no-float){margin-bottom:0px;font-size:11px}
	md-input-container label span.subtext {display: block;margin-left: 5px;padding-top: 2px}
	md-input-container label span.subtext{font-size: 10px}
	md-input-container label br {display: none}
	#copy-content-button-container{right:45px!important}
	md-input-container label{top:3px}
	md-progress-circular{top: -55px!important;right: 0;height: 100px}
	md-input-container [ng-message]{font-size:10px}
	#fliphead h3:after{top: 5px;border-left: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 14px solid #fff;}
	
	.headbar h1{font-size: 24px !important;line-height: 24px !important}
	.hostname_input{width:auto}
	.heading h2{font-size:17px}
	.headbar h3{font-size:18px!important;}
	.csr-form{padding:15px!important}
	.gbtn{font-size: 14px;padding: 5px 8px 4px}
	.card_input{width:100%}
	.custom-tooltip{width: 40px;top:6em;right:5px;padding:3px 4px}
	.md-button.md-fab.md-fab-top-right{right: 5px !important}
	
	.result{padding:15px;}
	.md-button.md-fab.md-fab-top-right{top:0;right:0}
	.result h2, .csr-form h4, .result h5{font-size:14px}
	.result .resultdesc{font-size:12px;line-height:16px;min-width:auto}
	.card-raw{margin-bottom:5px}
}