",$("#eFPtable").append(efp_table_column)}toggleResponsiveTable()}function change_rpkm_colour_scale(e){if(null===svg_colouring_element&&document.getElementById("flt3_theTable")&&document.getElementById("flt3_theTable").parentElement&&(svg_colouring_element=document.getElementById("flt3_theTable").parentElement),svg_colouring_element&&svg_colouring_element.innerHTML&&(svg_colouring_element.innerHTML=""),"rel"==e){const e=document.createElement("img");e.src="data:image/png;base64,"+relative_rpkm_scale,e.style="margin-top: 10px;",svg_colouring_element&&svg_colouring_element.appendChild(e)}else{const e=document.createElement("img");e.src="data:image/png;base64,"+absolute_rpkm_scale,e.style="margin-top: 10px;",svg_colouring_element&&svg_colouring_element.appendChild(e)}const t=["colTitle","colRNA","colrpb","coleFP","colRPKM","colDetails"];let n=[];document.getElementsByClassName("fltrow")&&document.getElementsByClassName("fltrow")[0]&&(n=document.getElementsByClassName("fltrow")[0].getElementsByTagName("td"));for(let l=0;l=1&&e[2]<=5||"C"==e[2]||"M"==e[2]||"c"==e[2]||"m"==e[2])&&("G"==e[3]||"g"==e[3])&&e[4]>=0&&e[4]<=9&&e[5]>=0&&e[5]<=9&&e[6]>=0&&e[6]<=9&&e[7]>=0&&e[7]<=9&&e[8]>=0&&e[8]<=9?$("#locus_button").removeAttr("disabled"):$("#locus_button").prop("disabled",!0)}function yscale_validation(){const e=document.getElementById("yscale_input").value;parseInt(e)>0||"Auto"==e||""==e?$("#locus_button").removeAttr("disabled"):$("#locus_button").prop("disabled",!0)}function rpkm_validation(){parseInt(document.getElementById("rpkm_scale_input").value)>0?$("#abs_scale_button").removeAttr("disabled"):$("#abs_scale_button").prop("disabled",!0)}const base_dataset_dictionary={"Araport 11 RNA-seq data":"cgi-bin/data/bamdata_araport11.xml","Developmental transcriptome - Klepikova et al":"cgi-bin/data/bamdata_Developmental_transcriptome.xml"};let databasesAdded=!1;function reset_database_options(){$(".userAdded").remove(),dataset_dictionary=base_dataset_dictionary,list_modified=!1,databasesAdded=!1}let xml_title,get_xml_list_output=[],user_exist=!1,list_modified=!1,check_for_change=0,match_title={},title_list=[];function get_user_XML_display(){const e=findAuthUser();""==users_email&&null==users_email&&null==users_email||users_email!==e?""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):$.ajax({url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/get_xml_list.php?user="+users_email,dataType:"json",failure:function(){console.log("ERROR! Something went wrong")},success:function(e){xml_title=void 0,match_title={},title_list=[];let t=1,n=1;if(get_xml_list_output=e,"fail"==get_xml_list_output.status)console.log("Error code: "+get_xml_list_output.error),user_exist=!1;else if("success"==get_xml_list_output.status){if(user_exist=!0,check_for_change!=get_xml_list_output.files.length&&(reset_database_options(),list_modified=!1),check_for_change=get_xml_list_output.files.length,get_xml_list_output.files.length>0)for(let e=0;e'+title_list[i]+"";list_modified=!0}),1e3)}databasesAdded=!0}})}let datalist=[],datalist_Title={};function create_data_list(e){if(datalist=[],datalist_Title={},e>0)for(let t=0;t{if(t.readyState===XMLHttpRequest.DONE&&200===t.status){let n=t.responseXML;if(n){let t=n.getElementsByTagName("files")[0].attributes.xmltitle.nodeValue;datalist_Title[t]=e[dlCallPosition],dlCallPosition+=1,DatalistXHRCall(e)}}},t.open("GET",n),t.send()}}function validateEmail(e){return/\S+@\S+\.\S+/.test(e)}function findAuthUser(){let e="";if(gapi){const t=gapi.auth2.getAuthInstance().currentUser;if(t){const n=Object.keys(t);for(const l of n){const n=t[l];if(n&&Object.keys(n).length>0){const t=Object.keys(n);for(const l of t){const t=n[l];if(t&&Object.keys(t).length>0){const n=Object.keys(t);for(const l of n){const n=t[l];if("string"==typeof n&&validateEmail(n)){e=n;break}}}}}}}else logError("Unable to reach current user from OAuth")}else logError("Unable to reach data from OAuth");return e}function check_if_Google_login(){const e=findAuthUser();""!=users_email&&users_email===e?!1===databasesAdded&&(document.getElementById("private_dataset_header").style.display="block",get_user_XML_display()):""!=users_email&&users_email!=e?(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):remove_private_database()}function add_user_xml_by_upload(){get_user_XML_display(),setTimeout((function(){const e=findAuthUser();user_exist?user_exist&&(null==dataset_dictionary[datasetName]?users_email===e?$.ajax({method:"POST",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/upload.php",data:{user:users_email,xml:upload_src,title:datasetName}}):""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):null!=dataset_dictionary[datasetName]&&(users_email===e?(list_modified=!1,check_for_change=0,$.ajax({url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/delete_xml.php?user="+users_email+"&file="+match_title[datasetName]}),$.ajax({method:"POST",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/upload.php",data:{user:users_email,xml:upload_src,title:datasetName}})):""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")))):users_email===e?$.ajax({method:"POST",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/upload.php",data:{user:users_email,xml:upload_src,title:datasetName}}):""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")),get_user_XML_display()}),1e4)}let uploadingData=!1;function which_upload_option(){uploadingData=!0;const e=findAuthUser();""!=users_email&&users_email===e?document.getElementById("upload_modal").click():""!=users_email&&users_email!=e?(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):""==users_email&&document.getElementById("upload_logX").click()}const public_dataset_dictionary={"Araport 11 RNA-seq data":"cgi-bin/data/bamdata_araport11.xml","Developmental transcriptome - Klepikova et al":"cgi-bin/data/bamdata_Developmental_transcriptome.xml"};let public_title_list=[],total_amount_of_datasets=0;function delete_fill(){$("#delete_fill").empty(),$("#publicDatabaseDownload").empty(),public_title_list=[];for(let t in public_dataset_dictionary)public_dataset_dictionary.hasOwnProperty(t)&&public_title_list.push(t);let e=0;for(total_amount_of_datasets=public_title_list.length+title_list.length,i=0;i '+public_title_list[i]+" "),e+=1;for(i=0;i '+title_list[i]+" "),e+=1}let isDeletePublicDisabled=!1;function disableDeletePublic(){for(i=0;i\n\t\n",n+="\t\t
",document.getElementById("XMLtoCSVtable").innerHTML+=n}})}}function download_XMLtableCSV(){for(let e=0;e\n",e+=downloadIndexTable_base;for(const t of eFPSortedSRA)e+="\t\t
",document.getElementById("hiddenDownloadModal_table").innerHTML+=e,$("#hiddenDownloadModal_table").tableToCSV(),document.getElementById("download_icon").classList.remove("progressLoading"),document.getElementById("bodyContainer").classList.remove("progressLoading")}let publicData=!0;function changePublicData(e=!1){publicData=!e&&!uploadingData&&(1==document.getElementById("xmlDatabase").selectedIndex||2==document.getElementById("xmlDatabase").selectedIndex)}let isPrecache=!0;function checkPreload(){if(get_input_values(),verifyLoci(locus)){loadingScreen(!1),progress_percent=0,document.title=`eFP-Seq Browser: Loading 0% - ${locus}`,document.getElementById("progress").title="0%",$("div#progress").width(progress_percent+"%");for(const e in public_dataset_dictionary){if(base_src===public_dataset_dictionary[e]){publicData=!0;break}publicData=!1}publicData&&"AT2G24270"==locus&&"simple"==dumpMethod&&!callDumpOutputs?(variants_radio_options(1),isPrecache=!0):(update_all_images(0),isPrecache=!1)}else console.error(`The following locus is not valid: ${locus}`)}function verifyLoci(e){if("string"==typeof e){const t=new RegExp("^[A][T][MC0-9][G][0-9]{5}[.][0-9]{1,2}$|^[A][T][MC0-9][G][0-9]{5}$","i");return e.trim().match(t)}return!1}let parse_output,GFF_List=[];function getGFF(e){GFF_List=[],$.ajax({url:"https://bar.utoronto.ca/webservices/bar_araport/gene_structure_by_locus.php?locus="+e,dataType:"json",failure:function(){console.log("Getting GFFs (getGFF) information failed to retrieve locus information from Araport11")},success:function(e){if(parse_output=e,parse_output.wasSuccessful){const e=parse_output.features[0].subfeatures;for(i=0;i0)for(let e=0;e0){const e=document.getElementById("locus").value.trim().split("/");e[0]?document.getElementById("locus").value=e[0].toUpperCase().trim():document.getElementById("locus").value=document.getElementById("locus").value.trim(),locus_validation()}}function returnBackToTop(){document.getElementById("main_content").scrollTop=0}function toggleOptionsTable(){"false"===document.getElementById("tableToggle").getAttribute("aria-expanded")?(document.getElementById("tableToggle").setAttribute("aria-expanded",!0),document.getElementById("filterDropdown").classList.add("show")):(document.getElementById("tableToggle").setAttribute("aria-expanded",!1),document.getElementById("filterDropdown").classList.remove("show"))}function toggleTableOptionsView(){document.getElementById("tableFilter-tab").classList.value.includes("active")?(document.getElementById("tableFilter-tab").classList.remove("active"),document.getElementById("eFPFilter-tab").classList.add("active"),document.getElementById("tableFilter").classList.remove("show","active"),document.getElementById("eFPFilter").classList.add("show","active")):(document.getElementById("tableFilter-tab").classList.add("active"),document.getElementById("eFPFilter-tab").classList.remove("active"),document.getElementById("tableFilter").classList.add("show","active"),document.getElementById("eFPFilter").classList.remove("show","active"))}let downloadDivNum=1;function downloadDiv(e){html2canvas(document.getElementById(e)).then((e=>{$("#appendCanvas").empty(),e.id="downloadDivNum_"+downloadDivNum,document.getElementById("appendCanvas").appendChild(e),document.getElementById("downloadDivNum_"+downloadDivNum).style.width="100%",$("#DownloadImageModal").modal("toggle"),downloadDivNum++}))}function displayNavBAR(e=!1){$("#navbar_menu").is(":visible")||e?(document.getElementById("navbar_menu").style.display="none",document.getElementById("main_content").className="col-sm-12",document.getElementById("openMenu").style.display="block",document.getElementById("theTable")&&document.getElementById("theTable").classList.add("RNATable")):!1===$("#navbar_menu").is(":visible")&&(document.getElementById("navbar_menu").style.display="block",document.getElementById("main_content").className="col-sm-9",document.getElementById("openMenu").style.display="none",document.getElementById("theTable")&&document.getElementById("theTable").classList.remove("RNATable"))}function adjustFooterSize(){const e=document.getElementById("navbar_menu");e&&(document.getElementById("nm_footer").style.width=e.offsetWidth+"px",e.scrollHeight==e.clientHeight?document.getElementById("nm_footer").classList.contains("navbar_menu_footer_overflow_abs")||(document.getElementById("nm_footer").classList.remove("navbar_menu_footer_overflow_sticky"),document.getElementById("nm_footer").classList.add("navbar_menu_footer_overflow_abs")):e.scrollHeight>e.clientHeight&&(document.getElementById("nm_footer").classList.contains("navbar_menu_footer_overflow_sticky")||(document.getElementById("nm_footer").classList.remove("navbar_menu_footer_overflow_abs"),document.getElementById("nm_footer").classList.add("navbar_menu_footer_overflow_sticky"))))}function adjustTableOptionsDropdownSize(){document.getElementById("filterDropdown").style.left=(document.body.offsetWidth-2*document.getElementById("tableToggle").offsetWidth-document.getElementById("filterDropdown").offsetWidth).toString()+"px"}function adjustSubmissionIFrameSize(){const e=.7*window.innerHeight;document.getElementById("submissioniframe").height=e+"px"}let usedToggle=!1;function toggleTableCol(e,t){const n=document.getElementsByClassName(e);if(t)for(const l of n)l&&l.removeAttribute("hidden");else if(!t)for(const l of n)l&&l.setAttribute("hidden",!0)}let responsiveRNAWidthAdjusted=!1;function responsiveRNAWidthResize(){const e=document.getElementsByClassName("responsiveRNAWidth");if(window.innerWidth<=575){for(i=0;i575&&responsiveRNAWidthAdjusted)for(i=0;i=1100&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!0,!0,!0,!0,!1):3==e||window.innerWidth<830&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!1,!1,!1,!1,!1):4==e||window.innerWidth<900&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!0,!1,!1,!1,!1):5==e||window.innerWidth<990&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!0,!1,!0,!1,!1):(6==e||window.innerWidth<1100&&!usedToggle)&&toggleResponsiveTableOptions(!0,!0,!0,!0,!0,!1,!1))}let ToggledTable=[!0,!0,!0,!0,!0,!0,!1];function RememberToggleOptions(e=!0,t=!0,n=!0,l=!0,o=!0,a=!0,s=!1){ToggledTable=[e,t,n,l,o,a,s]}const colSortList=["colTitle","colrpb","colRPKM","colDetails"];function ResizeArrowRow(){for(const e of colSortList){const t=e+"Row";document.getElementById(t).style.width=document.getElementById(t).parentNode.offsetWidth-2+"px";CheckElementWidth(e+"Arrow",8)}}function CheckElementWidth(e,t){document.getElementById(e).offsetWidth{-1!==navigator.userAgent.indexOf(e)&&o++})),o!=t){n=element,l=!1;break}}}if(n){$("#notChrome").empty();const e=' or through the following Google search results';$("#notChrome").append(e)}BrowserDetected=!0}}function CreateFilteredeFPList(){if($("#filtereFPList").empty(),tissueSRADic){const e=Object.keys(tissueSRADic);for(const t of e){let e='
';e+='',e+='
'+t+"
",e+="
",$("#filtereFPList").append(e)}}else logError("Unable to use tissueSRADic")}function ToggleFilteredeFP(e,t){const n=e.replace("_"," "),l=tissueSRADic[n];if(!0===t)for(i=0;i1)if("locus"===l[0].split("%20").join(" ").trim()){const n=e.substring(6).split("%20").join(" ").trim();shareLinkInputs.locus=n,document.getElementById("locus").value=n,t=!0}else if("dataset"===l[0].split("%20").join(" ").trim()){const t=e.substring(8).split("%20").join(" ").trim();shareLinkInputs.dataset=t,base_src=t,n=!0}}t&&n?(emptyLanding(),progress_percent=0,document.title=`eFP-Seq Browser: Loading 0% - ${locus}`,sraDict={},sraCountDic={},loadNewDataset=!1,setTimeout((function(){count_bam_num(),disableAllComparison(),checkPreload()}),200),toggleResponsiveTable(0)):displayError(t&&!1===n?"ERROR IN SHARE LINK! Missing dataset":!1===t&&n?"ERROR IN SHARE LINK! Missing locus":"ERROR IN SHARE LINK! Missing locus and dataset")}}function copyToClipboard(){""!==document.getElementById("shareLinkTextArea").trim()&&(document.getElementById("shareLinkTextArea").select(),document.execCommand("copy"))}let allCheckedOptions=[];function tableCheckbox(e,t=!1){const n=e.split("_")[0];if(t)disableAllComparison();else if(!1===t&&document.getElementById(e)&&document.getElementById(e).checked){allCheckedOptions.push(n);const t={};for(let e=0;e';parseInt(e)===parseInt(variantPosition)?l+='
",$("#eFPtable").append(efp_table_column)}toggleResponsiveTable()}function change_rpkm_colour_scale(e){if(null===svg_colouring_element&&document.getElementById("flt3_theTable")&&document.getElementById("flt3_theTable").parentElement&&(svg_colouring_element=document.getElementById("flt3_theTable").parentElement),svg_colouring_element&&svg_colouring_element.innerHTML&&(svg_colouring_element.innerHTML=""),"rel"==e){const e=document.createElement("img");e.src="data:image/png;base64,"+relative_rpkm_scale,e.style="margin-top: 10px;",svg_colouring_element&&svg_colouring_element.appendChild(e)}else{const e=document.createElement("img");e.src="data:image/png;base64,"+absolute_rpkm_scale,e.style="margin-top: 10px;",e.alt="Absolute RPKM Scale",svg_colouring_element&&svg_colouring_element.appendChild(e)}const t=["colTitle","colRNA","colrpb","coleFP","colRPKM","colDetails"];let n=[];document.getElementsByClassName("fltrow")&&document.getElementsByClassName("fltrow")[0]&&(n=document.getElementsByClassName("fltrow")[0].getElementsByTagName("td"));for(let l=0;l=1&&e[2]<=5||"C"==e[2]||"M"==e[2]||"c"==e[2]||"m"==e[2])&&("G"==e[3]||"g"==e[3])&&e[4]>=0&&e[4]<=9&&e[5]>=0&&e[5]<=9&&e[6]>=0&&e[6]<=9&&e[7]>=0&&e[7]<=9&&e[8]>=0&&e[8]<=9?$("#locus_button").removeAttr("disabled"):$("#locus_button").prop("disabled",!0)}function yscale_validation(){const e=document.getElementById("yscale_input").value;parseInt(e)>0||"Auto"==e||""==e?$("#locus_button").removeAttr("disabled"):$("#locus_button").prop("disabled",!0)}function rpkm_validation(){parseInt(document.getElementById("rpkm_scale_input").value)>0?$("#abs_scale_button").removeAttr("disabled"):$("#abs_scale_button").prop("disabled",!0)}const base_dataset_dictionary={"Araport 11 RNA-seq data":"cgi-bin/data/bamdata_araport11.xml","Developmental transcriptome - Klepikova et al":"cgi-bin/data/bamdata_Developmental_transcriptome.xml"};let databasesAdded=!1;function reset_database_options(){$(".userAdded").remove(),dataset_dictionary=base_dataset_dictionary,list_modified=!1,databasesAdded=!1}let xml_title,get_xml_list_output=[],user_exist=!1,list_modified=!1,check_for_change=0,match_title={},title_list=[];function get_user_XML_display(){const e=findAuthUser();""==users_email&&null==users_email&&null==users_email||users_email!==e?""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):$.ajax({url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/get_xml_list.php?user="+users_email,dataType:"json",failure:function(){console.log("ERROR! Something went wrong")},success:function(e){xml_title=void 0,match_title={},title_list=[];let t=1,n=1;if(get_xml_list_output=e,"fail"==get_xml_list_output.status)console.log("Error code: "+get_xml_list_output.error),user_exist=!1;else if("success"==get_xml_list_output.status){if(user_exist=!0,check_for_change!=get_xml_list_output.files.length&&(reset_database_options(),list_modified=!1),check_for_change=get_xml_list_output.files.length,get_xml_list_output.files.length>0)for(let e=0;e'+title_list[i]+"";list_modified=!0}),1e3)}databasesAdded=!0}})}let datalist=[],datalist_Title={};function create_data_list(e){if(datalist=[],datalist_Title={},e>0)for(let t=0;t{if(t.readyState===XMLHttpRequest.DONE&&200===t.status){let n=t.responseXML;if(n){let t=n.getElementsByTagName("files")[0].attributes.xmltitle.nodeValue;datalist_Title[t]=e[dlCallPosition],dlCallPosition+=1,DatalistXHRCall(e)}}},t.open("GET",n),t.send()}}function validateEmail(e){return/\S+@\S+\.\S+/.test(e)}function findAuthUser(){let e="";if(gapi){const t=gapi.auth2.getAuthInstance().currentUser;if(t){const n=Object.keys(t);for(const l of n){const n=t[l];if(n&&Object.keys(n).length>0){const t=Object.keys(n);for(const l of t){const t=n[l];if(t&&Object.keys(t).length>0){const n=Object.keys(t);for(const l of n){const n=t[l];if("string"==typeof n&&validateEmail(n)){e=n;break}}}}}}}else logError("Unable to reach current user from OAuth")}else logError("Unable to reach data from OAuth");return e}function check_if_Google_login(){const e=findAuthUser();""!=users_email&&users_email===e?!1===databasesAdded&&(document.getElementById("private_dataset_header").style.display="block",get_user_XML_display()):""!=users_email&&users_email!=e?(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):remove_private_database()}function add_user_xml_by_upload(){get_user_XML_display(),setTimeout((function(){const e=findAuthUser();user_exist?user_exist&&(null==dataset_dictionary[datasetName]?users_email===e?$.ajax({method:"POST",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/upload.php",data:{user:users_email,xml:upload_src,title:datasetName}}):""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):null!=dataset_dictionary[datasetName]&&(users_email===e?(list_modified=!1,check_for_change=0,$.ajax({url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/delete_xml.php?user="+users_email+"&file="+match_title[datasetName]}),$.ajax({method:"POST",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/upload.php",data:{user:users_email,xml:upload_src,title:datasetName}})):""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")))):users_email===e?$.ajax({method:"POST",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/upload.php",data:{user:users_email,xml:upload_src,title:datasetName}}):""!=users_email&&users_email!=e&&(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")),get_user_XML_display()}),1e4)}let uploadingData=!1;function which_upload_option(){uploadingData=!0;const e=findAuthUser();""!=users_email&&users_email===e?document.getElementById("upload_modal").click():""!=users_email&&users_email!=e?(signOut(),alert("Error occurred with your account, you have now been logged out. Please log back in")):""==users_email&&document.getElementById("upload_logX").click()}const public_dataset_dictionary={"Araport 11 RNA-seq data":"cgi-bin/data/bamdata_araport11.xml","Developmental transcriptome - Klepikova et al":"cgi-bin/data/bamdata_Developmental_transcriptome.xml"};let public_title_list=[],total_amount_of_datasets=0;function delete_fill(){$("#delete_fill").empty(),$("#publicDatabaseDownload").empty(),public_title_list=[];for(let t in public_dataset_dictionary)public_dataset_dictionary.hasOwnProperty(t)&&public_title_list.push(t);let e=0;for(total_amount_of_datasets=public_title_list.length+title_list.length,i=0;i '+public_title_list[i]+" "),e+=1;for(i=0;i '+title_list[i]+" "),e+=1}let isDeletePublicDisabled=!1;function disableDeletePublic(){for(i=0;i\n\t\n",n+="\t\t
",document.getElementById("XMLtoCSVtable").innerHTML+=n}})}}function download_XMLtableCSV(){for(let e=0;e\n",e+=downloadIndexTable_base;for(const t of eFPSortedSRA)e+="\t\t
",document.getElementById("hiddenDownloadModal_table").innerHTML+=e,$("#hiddenDownloadModal_table").tableToCSV(),document.getElementById("download_icon").classList.remove("progressLoading"),document.getElementById("bodyContainer").classList.remove("progressLoading")}let publicData=!0;function changePublicData(e=!1){publicData=!e&&!uploadingData&&(1==document.getElementById("xmlDatabase").selectedIndex||2==document.getElementById("xmlDatabase").selectedIndex)}let isPrecache=!0;function checkPreload(){if(get_input_values(),verifyLoci(locus)){loadingScreen(!1),progress_percent=0,document.title=`eFP-Seq Browser: Loading 0% - ${locus}`,document.getElementById("progress").title="0%",$("div#progress").width(progress_percent+"%");for(const e in public_dataset_dictionary){if(base_src===public_dataset_dictionary[e]){publicData=!0;break}publicData=!1}publicData&&"AT2G24270"==locus&&"simple"==dumpMethod&&!callDumpOutputs?(variants_radio_options(1),isPrecache=!0):(update_all_images(0),isPrecache=!1)}else console.error(`The following locus is not valid: ${locus}`)}function verifyLoci(e){if("string"==typeof e){const t=new RegExp("^[A][T][MC0-9][G][0-9]{5}[.][0-9]{1,2}$|^[A][T][MC0-9][G][0-9]{5}$","i");return e.trim().match(t)}return!1}let parse_output,GFF_List=[];function getGFF(e){GFF_List=[],$.ajax({url:"https://bar.utoronto.ca/webservices/bar_araport/gene_structure_by_locus.php?locus="+e,dataType:"json",failure:function(){console.log("Getting GFFs (getGFF) information failed to retrieve locus information from Araport11")},success:function(e){if(parse_output=e,parse_output.wasSuccessful){const e=parse_output.features[0].subfeatures;for(i=0;i0)for(let e=0;e0){const e=document.getElementById("locus").value.trim().split("/");e[0]?document.getElementById("locus").value=e[0].toUpperCase().trim():document.getElementById("locus").value=document.getElementById("locus").value.trim(),locus_validation()}}function returnBackToTop(){document.getElementById("main_content").scrollTop=0}function toggleOptionsTable(){"false"===document.getElementById("tableToggle").getAttribute("aria-expanded")?(document.getElementById("tableToggle").setAttribute("aria-expanded",!0),document.getElementById("filterDropdown").classList.add("show")):(document.getElementById("tableToggle").setAttribute("aria-expanded",!1),document.getElementById("filterDropdown").classList.remove("show"))}function toggleTableOptionsView(){document.getElementById("tableFilter-tab").classList.value.includes("active")?(document.getElementById("tableFilter-tab").classList.remove("active"),document.getElementById("eFPFilter-tab").classList.add("active"),document.getElementById("tableFilter").classList.remove("show","active"),document.getElementById("eFPFilter").classList.add("show","active")):(document.getElementById("tableFilter-tab").classList.add("active"),document.getElementById("eFPFilter-tab").classList.remove("active"),document.getElementById("tableFilter").classList.add("show","active"),document.getElementById("eFPFilter").classList.remove("show","active"))}let downloadDivNum=1;function downloadDiv(e){html2canvas(document.getElementById(e)).then((e=>{$("#appendCanvas").empty(),e.id="downloadDivNum_"+downloadDivNum,document.getElementById("appendCanvas").appendChild(e),document.getElementById("downloadDivNum_"+downloadDivNum).style.width="100%",$("#DownloadImageModal").modal("toggle"),downloadDivNum++}))}function displayNavBAR(e=!1){$("#navbar_menu").is(":visible")||e?(document.getElementById("navbar_menu").style.display="none",document.getElementById("main_content").className="col-sm-12",document.getElementById("openMenu").style.display="block",document.getElementById("theTable")&&document.getElementById("theTable").classList.add("RNATable")):!1===$("#navbar_menu").is(":visible")&&(document.getElementById("navbar_menu").style.display="block",document.getElementById("main_content").className="col-sm-9",document.getElementById("openMenu").style.display="none",document.getElementById("theTable")&&document.getElementById("theTable").classList.remove("RNATable"))}function adjustFooterSize(){const e=document.getElementById("navbar_menu");e&&(document.getElementById("nm_footer").style.width=e.offsetWidth+"px",e.scrollHeight==e.clientHeight?document.getElementById("nm_footer").classList.contains("navbar_menu_footer_overflow_abs")||(document.getElementById("nm_footer").classList.remove("navbar_menu_footer_overflow_sticky"),document.getElementById("nm_footer").classList.add("navbar_menu_footer_overflow_abs")):e.scrollHeight>e.clientHeight&&(document.getElementById("nm_footer").classList.contains("navbar_menu_footer_overflow_sticky")||(document.getElementById("nm_footer").classList.remove("navbar_menu_footer_overflow_abs"),document.getElementById("nm_footer").classList.add("navbar_menu_footer_overflow_sticky"))))}function adjustTableOptionsDropdownSize(){document.getElementById("filterDropdown").style.left=(document.body.offsetWidth-2*document.getElementById("tableToggle").offsetWidth-document.getElementById("filterDropdown").offsetWidth).toString()+"px"}function adjustSubmissionIFrameSize(){const e=.7*window.innerHeight;document.getElementById("submissioniframe").height=e+"px"}let usedToggle=!1;function toggleTableCol(e,t){const n=document.getElementsByClassName(e);if(t)for(const l of n)l&&l.removeAttribute("hidden");else if(!t)for(const l of n)l&&l.setAttribute("hidden",!0)}let responsiveRNAWidthAdjusted=!1;function responsiveRNAWidthResize(){const e=document.getElementsByClassName("responsiveRNAWidth");if(window.innerWidth<=575){for(i=0;i575&&responsiveRNAWidthAdjusted)for(i=0;i=1100&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!0,!0,!0,!0,!1):3==e||window.innerWidth<830&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!1,!1,!1,!1,!1):4==e||window.innerWidth<900&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!0,!1,!1,!1,!1):5==e||window.innerWidth<990&&!usedToggle?toggleResponsiveTableOptions(!0,!0,!0,!1,!0,!1,!1):(6==e||window.innerWidth<1100&&!usedToggle)&&toggleResponsiveTableOptions(!0,!0,!0,!0,!0,!1,!1))}let ToggledTable=[!0,!0,!0,!0,!0,!0,!1];function RememberToggleOptions(e=!0,t=!0,n=!0,l=!0,o=!0,a=!0,s=!1){ToggledTable=[e,t,n,l,o,a,s]}const colSortList=["colTitle","colrpb","colRPKM","colDetails"];function ResizeArrowRow(){for(const e of colSortList){const t=e+"Row";document.getElementById(t).style.width=document.getElementById(t).parentNode.offsetWidth-2+"px";CheckElementWidth(e+"Arrow",8)}}function CheckElementWidth(e,t){document.getElementById(e).offsetWidth{-1!==navigator.userAgent.indexOf(e)&&o++})),o!=t){n=element,l=!1;break}}}if(n){$("#notChrome").empty();const e=' or through the following Google search results';$("#notChrome").append(e)}BrowserDetected=!0}}function CreateFilteredeFPList(){if($("#filtereFPList").empty(),tissueSRADic){const e=Object.keys(tissueSRADic);for(const t of e){let e='
';e+='',e+='
'+t+"
",e+="
",$("#filtereFPList").append(e)}}else logError("Unable to use tissueSRADic")}function ToggleFilteredeFP(e,t){const n=e.replace("_"," "),l=tissueSRADic[n];if(!0===t)for(i=0;i1)if("locus"===l[0].split("%20").join(" ").trim()){const n=e.substring(6).split("%20").join(" ").trim();shareLinkInputs.locus=n,document.getElementById("locus").value=n,t=!0}else if("dataset"===l[0].split("%20").join(" ").trim()){const t=e.substring(8).split("%20").join(" ").trim();shareLinkInputs.dataset=t,base_src=t,n=!0}}t&&n?(emptyLanding(),progress_percent=0,document.title=`eFP-Seq Browser: Loading 0% - ${locus}`,sraDict={},sraCountDic={},loadNewDataset=!1,setTimeout((function(){count_bam_num(),disableAllComparison(),checkPreload()}),200),toggleResponsiveTable(0)):displayError(t&&!1===n?"ERROR IN SHARE LINK! Missing dataset":!1===t&&n?"ERROR IN SHARE LINK! Missing locus":"ERROR IN SHARE LINK! Missing locus and dataset")}}function copyToClipboard(){""!==document.getElementById("shareLinkTextArea").trim()&&(document.getElementById("shareLinkTextArea").select(),document.execCommand("copy"))}let allCheckedOptions=[];function tableCheckbox(e,t=!1){const n=e.split("_")[0];if(t)disableAllComparison();else if(!1===t&&document.getElementById(e)&&document.getElementById(e).checked){allCheckedOptions.push(n);const t={};for(let e=0;e';parseInt(e)===parseInt(variantPosition)?l+='
\n',l+="",t[e]=n+"_compareRow"+e,document.getElementById("compareTable").innerHTML+=l,document.getElementById(n+"_rnaseq_img"+e)&&document.getElementById(n+"_rnaseq_img"+e).setAttribute("src",document.getElementById(n+"_rnaseq_img").src),document.getElementById(n+"_gene_structure_img"+e)&&document.getElementById(n+"_gene_structure_img"+e).setAttribute("src",document.getElementsByClassName("dd-option-image")[e].src),sraDict[n].RPKM&&sraDict[n].RPKM[e]&&colour_part_by_id(n+"_svg"+e,sraDict[n].svg_part,sraDict[n].RPKM[e],colouring_mode)}document.getElementById(e).checked=!0,document.getElementById("allCheckbox").checked=!0,"rel"!=colouring_mode&&(document.getElementById("compareGeneVariants").disabled=!1)}else!1===t?(disableCompare(n),allCheckedOptions.splice(allCheckedOptions.indexOf(n),1),document.getElementById(e).checked=!1):!0===t&&disableAllComparison(),0===allCheckedOptions.length&&(document.getElementById("compareGeneVariants").disabled=!0)}function disableCompare(e){for(let t=0;t=0;l--)document.getElementsByClassName("compareDataRow")[l].remove();allCheckedOptions=[],e=document.getElementsByClassName("compareCheckbox");for(let l=0;l0&&hiddenGoogleSignin(),getGFF(locus),$("#locus").autocomplete({source:function(e,t){const n=e.term.split(/,\s*/).pop();$.ajax({type:"GET",url:"https://bar.utoronto.ca/webservices/eFP-Seq_Browser/idautocomplete.cgi?species=Arabidopsis_thaliana&term="+n,dataType:"json"}).done((function(e){e&&e.length>=7?t(e.slice(0,7)):t(e)}))},close:function(){correctAGIIDInput()}});const e=document.getElementById("submissioniframe");e&&e.setAttribute("src",e.getAttribute("data-src")),adjustSubmissionIFrameSize(),readShareLink()}$(window).resize((function(){adjustFooterSize(),adjustSubmissionIFrameSize(),responsiveRNAWidthResize(),toggleResponsiveTable(),adjustTableOptionsDropdownSize(),setTimeout((function(){adjustFooterSize()}),10)})),adjustFooterSize(),window.addEventListener("load",(function(){init()}));
\ No newline at end of file
diff --git a/cgi-bin/core/packages/GoogleMaterial/LICENSE b/cgi-bin/core/packages/GoogleMaterial/LICENSE
new file mode 100644
index 0000000..9faf108
--- /dev/null
+++ b/cgi-bin/core/packages/GoogleMaterial/LICENSE
@@ -0,0 +1,212 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright 2015 Google Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ All code in any directories or sub-directories that end with *.html or
+ *.css is licensed under the Creative Commons Attribution International
+ 4.0 License, which full text can be found here:
+ https://creativecommons.org/licenses/by/4.0/legalcode.
+
+ As an exception to this license, all html or css that is generated by
+ the software at the direction of the user is copyright the user. The
+ user has full ownership and control over such content, including
+ whether and how they wish to license it.
diff --git a/cgi-bin/core/packages/GoogleMaterial/bower.json b/cgi-bin/core/packages/GoogleMaterial/bower.json
new file mode 100644
index 0000000..2a826c9
--- /dev/null
+++ b/cgi-bin/core/packages/GoogleMaterial/bower.json
@@ -0,0 +1,29 @@
+{
+ "name": "material-design-lite",
+ "version": "1.3.0",
+ "homepage": "https://github.com/google/material-design-lite",
+ "authors": [
+ "Material Design Lite team"
+ ],
+ "description": "Material Design Components in CSS, JS and HTML",
+ "main": [
+ "material.min.css",
+ "material.min.js"
+ ],
+ "keywords": [
+ "material",
+ "design",
+ "styleguide",
+ "style",
+ "guide"
+ ],
+ "license": "Apache-2",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "./lib/.bower_components",
+ "test",
+ "tests"
+ ]
+}
diff --git a/cgi-bin/core/packages/GoogleMaterial/material.css b/cgi-bin/core/packages/GoogleMaterial/material.css
new file mode 100644
index 0000000..6c7206e
--- /dev/null
+++ b/cgi-bin/core/packages/GoogleMaterial/material.css
@@ -0,0 +1,11476 @@
+/**
+ * material-design-lite - Material Design Components in CSS, JS and HTML
+ * @version v1.3.0
+ * @license Apache-2.0
+ * @copyright 2015 Google, Inc.
+ * @link https://github.com/google/material-design-lite
+ */
+@charset "UTF-8";
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Material Design Lite */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+html {
+ color: rgba(0,0,0, 0.87);
+ font-size: 1em;
+ line-height: 1.4; }
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none; }
+::selection {
+ background: #b3d4fc;
+ text-shadow: none; }
+
+/*
+ * A better looking default horizontal rule
+ */
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0; }
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle; }
+
+/*
+ * Remove default fieldset styles.
+ */
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0; }
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+textarea {
+ resize: vertical; }
+
+/* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+.browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0; }
+
+/* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+/* ==========================================================================
+ Helper classes
+ ========================================================================== */
+/*
+ * Hide visually and from screen readers:
+ */
+.hidden {
+ display: none !important; }
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+.visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px; }
+
+/*
+ * Extends the .visuallyhidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto; }
+
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+.invisible {
+ visibility: hidden; }
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+.clearfix:before,
+.clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */ }
+
+.clearfix:after {
+ clear: both; }
+
+/* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+@media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */ }
+
+@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */ }
+
+/* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ http://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+@media print {
+ *,
+ *:before,
+ *:after,
+ *:first-letter {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster: http://www.sanbeiji.com/archives/953 */
+ box-shadow: none !important; }
+ a,
+ a:visited {
+ text-decoration: underline; }
+ a[href]:after {
+ content: " (" attr(href) ")"; }
+ abbr[title]:after {
+ content: " (" attr(title) ")"; }
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: ""; }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid; }
+ /*
+ * Printing Tables:
+ * http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+ thead {
+ display: table-header-group; }
+ tr,
+ img {
+ page-break-inside: avoid; }
+ img {
+ max-width: 100% !important; }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3; }
+ h2,
+ h3 {
+ page-break-after: avoid; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Remove the unwanted box around FAB buttons */
+/* More info: http://goo.gl/IPwKi */
+a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
+.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
+ -webkit-tap-highlight-color: transparent;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
+
+/*
+ * Make html take up the entire screen
+ * Then set touch-action to avoid touch delay on mobile IE
+ */
+html {
+ width: 100%;
+ height: 100%;
+ -ms-touch-action: manipulation;
+ touch-action: manipulation; }
+
+/*
+* Make body take up the entire screen
+* Remove body margin so layout containers don't cause extra overflow.
+*/
+body {
+ width: 100%;
+ min-height: 100%;
+ margin: 0; }
+
+/*
+ * Main display reset for IE support.
+ * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
+ */
+main {
+ display: block; }
+
+/*
+* Apply no display to elements with the hidden attribute.
+* IE 9 and 10 support.
+*/
+*[hidden] {
+ display: none !important; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+html, body {
+ font-family: "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px; }
+
+h1, h2, h3, h4, h5, h6, p {
+ margin: 0;
+ padding: 0; }
+
+/**
+ * Styles for HTML elements
+ */
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 56px;
+ font-weight: 400;
+ line-height: 1.35;
+ letter-spacing: -0.02em;
+ opacity: 0.54;
+ font-size: 0.6em; }
+
+h1 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 56px;
+ font-weight: 400;
+ line-height: 1.35;
+ letter-spacing: -0.02em;
+ margin-top: 24px;
+ margin-bottom: 24px; }
+
+h2 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 45px;
+ font-weight: 400;
+ line-height: 48px;
+ margin-top: 24px;
+ margin-bottom: 24px; }
+
+h3 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 34px;
+ font-weight: 400;
+ line-height: 40px;
+ margin-top: 24px;
+ margin-bottom: 24px; }
+
+h4 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 32px;
+ -moz-osx-font-smoothing: grayscale;
+ margin-top: 24px;
+ margin-bottom: 16px; }
+
+h5 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: 0.02em;
+ margin-top: 24px;
+ margin-bottom: 16px; }
+
+h6 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.04em;
+ margin-top: 24px;
+ margin-bottom: 16px; }
+
+p {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ margin-bottom: 16px; }
+
+a {
+ color: rgb(255,64,129);
+ font-weight: 500; }
+
+blockquote {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ position: relative;
+ font-size: 24px;
+ font-weight: 300;
+ font-style: italic;
+ line-height: 1.35;
+ letter-spacing: 0.08em; }
+ blockquote:before {
+ position: absolute;
+ left: -0.5em;
+ content: '“'; }
+ blockquote:after {
+ content: '”';
+ margin-left: -0.05em; }
+
+mark {
+ background-color: #f4ff81; }
+
+dt {
+ font-weight: 700; }
+
+address {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: 0;
+ font-style: normal; }
+
+ul, ol {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0; }
+
+/**
+ * Class Name Styles
+ */
+.mdl-typography--display-4 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 112px;
+ font-weight: 300;
+ line-height: 1;
+ letter-spacing: -0.04em; }
+
+.mdl-typography--display-4-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 112px;
+ font-weight: 300;
+ line-height: 1;
+ letter-spacing: -0.04em;
+ opacity: 0.54; }
+
+.mdl-typography--display-3 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 56px;
+ font-weight: 400;
+ line-height: 1.35;
+ letter-spacing: -0.02em; }
+
+.mdl-typography--display-3-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 56px;
+ font-weight: 400;
+ line-height: 1.35;
+ letter-spacing: -0.02em;
+ opacity: 0.54; }
+
+.mdl-typography--display-2 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 45px;
+ font-weight: 400;
+ line-height: 48px; }
+
+.mdl-typography--display-2-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 45px;
+ font-weight: 400;
+ line-height: 48px;
+ opacity: 0.54; }
+
+.mdl-typography--display-1 {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 34px;
+ font-weight: 400;
+ line-height: 40px; }
+
+.mdl-typography--display-1-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 34px;
+ font-weight: 400;
+ line-height: 40px;
+ opacity: 0.54; }
+
+.mdl-typography--headline {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 32px;
+ -moz-osx-font-smoothing: grayscale; }
+
+.mdl-typography--headline-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 32px;
+ -moz-osx-font-smoothing: grayscale;
+ opacity: 0.87; }
+
+.mdl-typography--title {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: 0.02em; }
+
+.mdl-typography--title-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: 0.02em;
+ opacity: 0.87; }
+
+.mdl-typography--subhead {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.04em; }
+
+.mdl-typography--subhead-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.04em;
+ opacity: 0.87; }
+
+.mdl-typography--body-2 {
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 24px;
+ letter-spacing: 0; }
+
+.mdl-typography--body-2-color-contrast {
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 24px;
+ letter-spacing: 0;
+ opacity: 0.87; }
+
+.mdl-typography--body-1 {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0; }
+
+.mdl-typography--body-1-color-contrast {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ opacity: 0.87; }
+
+.mdl-typography--body-2-force-preferred-font {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0; }
+
+.mdl-typography--body-2-force-preferred-font-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0;
+ opacity: 0.87; }
+
+.mdl-typography--body-1-force-preferred-font {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0; }
+
+.mdl-typography--body-1-force-preferred-font-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ opacity: 0.87; }
+
+.mdl-typography--caption {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: 0; }
+
+.mdl-typography--caption-force-preferred-font {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: 0; }
+
+.mdl-typography--caption-color-contrast {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: 0;
+ opacity: 0.54; }
+
+.mdl-typography--caption-force-preferred-font-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: 0;
+ opacity: 0.54; }
+
+.mdl-typography--menu {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: 0; }
+
+.mdl-typography--menu-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: 0;
+ opacity: 0.87; }
+
+.mdl-typography--button {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ text-transform: uppercase;
+ line-height: 1;
+ letter-spacing: 0; }
+
+.mdl-typography--button-color-contrast {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ text-transform: uppercase;
+ line-height: 1;
+ letter-spacing: 0;
+ opacity: 0.87; }
+
+.mdl-typography--text-left {
+ text-align: left; }
+
+.mdl-typography--text-right {
+ text-align: right; }
+
+.mdl-typography--text-center {
+ text-align: center; }
+
+.mdl-typography--text-justify {
+ text-align: justify; }
+
+.mdl-typography--text-nowrap {
+ white-space: nowrap; }
+
+.mdl-typography--text-lowercase {
+ text-transform: lowercase; }
+
+.mdl-typography--text-uppercase {
+ text-transform: uppercase; }
+
+.mdl-typography--text-capitalize {
+ text-transform: capitalize; }
+
+.mdl-typography--font-thin {
+ font-weight: 200 !important; }
+
+.mdl-typography--font-light {
+ font-weight: 300 !important; }
+
+.mdl-typography--font-regular {
+ font-weight: 400 !important; }
+
+.mdl-typography--font-medium {
+ font-weight: 500 !important; }
+
+.mdl-typography--font-bold {
+ font-weight: 700 !important; }
+
+.mdl-typography--font-black {
+ font-weight: 900 !important; }
+
+.material-icons {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ word-wrap: normal;
+ -moz-font-feature-settings: 'liga';
+ font-feature-settings: 'liga';
+ -webkit-font-feature-settings: 'liga';
+ -webkit-font-smoothing: antialiased; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-color-text--red {
+ color: rgb(244,67,54) !important; }
+
+.mdl-color--red {
+ background-color: rgb(244,67,54) !important; }
+
+.mdl-color-text--red-50 {
+ color: rgb(255,235,238) !important; }
+
+.mdl-color--red-50 {
+ background-color: rgb(255,235,238) !important; }
+
+.mdl-color-text--red-100 {
+ color: rgb(255,205,210) !important; }
+
+.mdl-color--red-100 {
+ background-color: rgb(255,205,210) !important; }
+
+.mdl-color-text--red-200 {
+ color: rgb(239,154,154) !important; }
+
+.mdl-color--red-200 {
+ background-color: rgb(239,154,154) !important; }
+
+.mdl-color-text--red-300 {
+ color: rgb(229,115,115) !important; }
+
+.mdl-color--red-300 {
+ background-color: rgb(229,115,115) !important; }
+
+.mdl-color-text--red-400 {
+ color: rgb(239,83,80) !important; }
+
+.mdl-color--red-400 {
+ background-color: rgb(239,83,80) !important; }
+
+.mdl-color-text--red-500 {
+ color: rgb(244,67,54) !important; }
+
+.mdl-color--red-500 {
+ background-color: rgb(244,67,54) !important; }
+
+.mdl-color-text--red-600 {
+ color: rgb(229,57,53) !important; }
+
+.mdl-color--red-600 {
+ background-color: rgb(229,57,53) !important; }
+
+.mdl-color-text--red-700 {
+ color: rgb(211,47,47) !important; }
+
+.mdl-color--red-700 {
+ background-color: rgb(211,47,47) !important; }
+
+.mdl-color-text--red-800 {
+ color: rgb(198,40,40) !important; }
+
+.mdl-color--red-800 {
+ background-color: rgb(198,40,40) !important; }
+
+.mdl-color-text--red-900 {
+ color: rgb(183,28,28) !important; }
+
+.mdl-color--red-900 {
+ background-color: rgb(183,28,28) !important; }
+
+.mdl-color-text--red-A100 {
+ color: rgb(255,138,128) !important; }
+
+.mdl-color--red-A100 {
+ background-color: rgb(255,138,128) !important; }
+
+.mdl-color-text--red-A200 {
+ color: rgb(255,82,82) !important; }
+
+.mdl-color--red-A200 {
+ background-color: rgb(255,82,82) !important; }
+
+.mdl-color-text--red-A400 {
+ color: rgb(255,23,68) !important; }
+
+.mdl-color--red-A400 {
+ background-color: rgb(255,23,68) !important; }
+
+.mdl-color-text--red-A700 {
+ color: rgb(213,0,0) !important; }
+
+.mdl-color--red-A700 {
+ background-color: rgb(213,0,0) !important; }
+
+.mdl-color-text--pink {
+ color: rgb(233,30,99) !important; }
+
+.mdl-color--pink {
+ background-color: rgb(233,30,99) !important; }
+
+.mdl-color-text--pink-50 {
+ color: rgb(252,228,236) !important; }
+
+.mdl-color--pink-50 {
+ background-color: rgb(252,228,236) !important; }
+
+.mdl-color-text--pink-100 {
+ color: rgb(248,187,208) !important; }
+
+.mdl-color--pink-100 {
+ background-color: rgb(248,187,208) !important; }
+
+.mdl-color-text--pink-200 {
+ color: rgb(244,143,177) !important; }
+
+.mdl-color--pink-200 {
+ background-color: rgb(244,143,177) !important; }
+
+.mdl-color-text--pink-300 {
+ color: rgb(240,98,146) !important; }
+
+.mdl-color--pink-300 {
+ background-color: rgb(240,98,146) !important; }
+
+.mdl-color-text--pink-400 {
+ color: rgb(236,64,122) !important; }
+
+.mdl-color--pink-400 {
+ background-color: rgb(236,64,122) !important; }
+
+.mdl-color-text--pink-500 {
+ color: rgb(233,30,99) !important; }
+
+.mdl-color--pink-500 {
+ background-color: rgb(233,30,99) !important; }
+
+.mdl-color-text--pink-600 {
+ color: rgb(216,27,96) !important; }
+
+.mdl-color--pink-600 {
+ background-color: rgb(216,27,96) !important; }
+
+.mdl-color-text--pink-700 {
+ color: rgb(194,24,91) !important; }
+
+.mdl-color--pink-700 {
+ background-color: rgb(194,24,91) !important; }
+
+.mdl-color-text--pink-800 {
+ color: rgb(173,20,87) !important; }
+
+.mdl-color--pink-800 {
+ background-color: rgb(173,20,87) !important; }
+
+.mdl-color-text--pink-900 {
+ color: rgb(136,14,79) !important; }
+
+.mdl-color--pink-900 {
+ background-color: rgb(136,14,79) !important; }
+
+.mdl-color-text--pink-A100 {
+ color: rgb(255,128,171) !important; }
+
+.mdl-color--pink-A100 {
+ background-color: rgb(255,128,171) !important; }
+
+.mdl-color-text--pink-A200 {
+ color: rgb(255,64,129) !important; }
+
+.mdl-color--pink-A200 {
+ background-color: rgb(255,64,129) !important; }
+
+.mdl-color-text--pink-A400 {
+ color: rgb(245,0,87) !important; }
+
+.mdl-color--pink-A400 {
+ background-color: rgb(245,0,87) !important; }
+
+.mdl-color-text--pink-A700 {
+ color: rgb(197,17,98) !important; }
+
+.mdl-color--pink-A700 {
+ background-color: rgb(197,17,98) !important; }
+
+.mdl-color-text--purple {
+ color: rgb(156,39,176) !important; }
+
+.mdl-color--purple {
+ background-color: rgb(156,39,176) !important; }
+
+.mdl-color-text--purple-50 {
+ color: rgb(243,229,245) !important; }
+
+.mdl-color--purple-50 {
+ background-color: rgb(243,229,245) !important; }
+
+.mdl-color-text--purple-100 {
+ color: rgb(225,190,231) !important; }
+
+.mdl-color--purple-100 {
+ background-color: rgb(225,190,231) !important; }
+
+.mdl-color-text--purple-200 {
+ color: rgb(206,147,216) !important; }
+
+.mdl-color--purple-200 {
+ background-color: rgb(206,147,216) !important; }
+
+.mdl-color-text--purple-300 {
+ color: rgb(186,104,200) !important; }
+
+.mdl-color--purple-300 {
+ background-color: rgb(186,104,200) !important; }
+
+.mdl-color-text--purple-400 {
+ color: rgb(171,71,188) !important; }
+
+.mdl-color--purple-400 {
+ background-color: rgb(171,71,188) !important; }
+
+.mdl-color-text--purple-500 {
+ color: rgb(156,39,176) !important; }
+
+.mdl-color--purple-500 {
+ background-color: rgb(156,39,176) !important; }
+
+.mdl-color-text--purple-600 {
+ color: rgb(142,36,170) !important; }
+
+.mdl-color--purple-600 {
+ background-color: rgb(142,36,170) !important; }
+
+.mdl-color-text--purple-700 {
+ color: rgb(123,31,162) !important; }
+
+.mdl-color--purple-700 {
+ background-color: rgb(123,31,162) !important; }
+
+.mdl-color-text--purple-800 {
+ color: rgb(106,27,154) !important; }
+
+.mdl-color--purple-800 {
+ background-color: rgb(106,27,154) !important; }
+
+.mdl-color-text--purple-900 {
+ color: rgb(74,20,140) !important; }
+
+.mdl-color--purple-900 {
+ background-color: rgb(74,20,140) !important; }
+
+.mdl-color-text--purple-A100 {
+ color: rgb(234,128,252) !important; }
+
+.mdl-color--purple-A100 {
+ background-color: rgb(234,128,252) !important; }
+
+.mdl-color-text--purple-A200 {
+ color: rgb(224,64,251) !important; }
+
+.mdl-color--purple-A200 {
+ background-color: rgb(224,64,251) !important; }
+
+.mdl-color-text--purple-A400 {
+ color: rgb(213,0,249) !important; }
+
+.mdl-color--purple-A400 {
+ background-color: rgb(213,0,249) !important; }
+
+.mdl-color-text--purple-A700 {
+ color: rgb(170,0,255) !important; }
+
+.mdl-color--purple-A700 {
+ background-color: rgb(170,0,255) !important; }
+
+.mdl-color-text--deep-purple {
+ color: rgb(103,58,183) !important; }
+
+.mdl-color--deep-purple {
+ background-color: rgb(103,58,183) !important; }
+
+.mdl-color-text--deep-purple-50 {
+ color: rgb(237,231,246) !important; }
+
+.mdl-color--deep-purple-50 {
+ background-color: rgb(237,231,246) !important; }
+
+.mdl-color-text--deep-purple-100 {
+ color: rgb(209,196,233) !important; }
+
+.mdl-color--deep-purple-100 {
+ background-color: rgb(209,196,233) !important; }
+
+.mdl-color-text--deep-purple-200 {
+ color: rgb(179,157,219) !important; }
+
+.mdl-color--deep-purple-200 {
+ background-color: rgb(179,157,219) !important; }
+
+.mdl-color-text--deep-purple-300 {
+ color: rgb(149,117,205) !important; }
+
+.mdl-color--deep-purple-300 {
+ background-color: rgb(149,117,205) !important; }
+
+.mdl-color-text--deep-purple-400 {
+ color: rgb(126,87,194) !important; }
+
+.mdl-color--deep-purple-400 {
+ background-color: rgb(126,87,194) !important; }
+
+.mdl-color-text--deep-purple-500 {
+ color: rgb(103,58,183) !important; }
+
+.mdl-color--deep-purple-500 {
+ background-color: rgb(103,58,183) !important; }
+
+.mdl-color-text--deep-purple-600 {
+ color: rgb(94,53,177) !important; }
+
+.mdl-color--deep-purple-600 {
+ background-color: rgb(94,53,177) !important; }
+
+.mdl-color-text--deep-purple-700 {
+ color: rgb(81,45,168) !important; }
+
+.mdl-color--deep-purple-700 {
+ background-color: rgb(81,45,168) !important; }
+
+.mdl-color-text--deep-purple-800 {
+ color: rgb(69,39,160) !important; }
+
+.mdl-color--deep-purple-800 {
+ background-color: rgb(69,39,160) !important; }
+
+.mdl-color-text--deep-purple-900 {
+ color: rgb(49,27,146) !important; }
+
+.mdl-color--deep-purple-900 {
+ background-color: rgb(49,27,146) !important; }
+
+.mdl-color-text--deep-purple-A100 {
+ color: rgb(179,136,255) !important; }
+
+.mdl-color--deep-purple-A100 {
+ background-color: rgb(179,136,255) !important; }
+
+.mdl-color-text--deep-purple-A200 {
+ color: rgb(124,77,255) !important; }
+
+.mdl-color--deep-purple-A200 {
+ background-color: rgb(124,77,255) !important; }
+
+.mdl-color-text--deep-purple-A400 {
+ color: rgb(101,31,255) !important; }
+
+.mdl-color--deep-purple-A400 {
+ background-color: rgb(101,31,255) !important; }
+
+.mdl-color-text--deep-purple-A700 {
+ color: rgb(98,0,234) !important; }
+
+.mdl-color--deep-purple-A700 {
+ background-color: rgb(98,0,234) !important; }
+
+.mdl-color-text--indigo {
+ color: rgb(63,81,181) !important; }
+
+.mdl-color--indigo {
+ background-color: rgb(63,81,181) !important; }
+
+.mdl-color-text--indigo-50 {
+ color: rgb(232,234,246) !important; }
+
+.mdl-color--indigo-50 {
+ background-color: rgb(232,234,246) !important; }
+
+.mdl-color-text--indigo-100 {
+ color: rgb(197,202,233) !important; }
+
+.mdl-color--indigo-100 {
+ background-color: rgb(197,202,233) !important; }
+
+.mdl-color-text--indigo-200 {
+ color: rgb(159,168,218) !important; }
+
+.mdl-color--indigo-200 {
+ background-color: rgb(159,168,218) !important; }
+
+.mdl-color-text--indigo-300 {
+ color: rgb(121,134,203) !important; }
+
+.mdl-color--indigo-300 {
+ background-color: rgb(121,134,203) !important; }
+
+.mdl-color-text--indigo-400 {
+ color: rgb(92,107,192) !important; }
+
+.mdl-color--indigo-400 {
+ background-color: rgb(92,107,192) !important; }
+
+.mdl-color-text--indigo-500 {
+ color: rgb(63,81,181) !important; }
+
+.mdl-color--indigo-500 {
+ background-color: rgb(63,81,181) !important; }
+
+.mdl-color-text--indigo-600 {
+ color: rgb(57,73,171) !important; }
+
+.mdl-color--indigo-600 {
+ background-color: rgb(57,73,171) !important; }
+
+.mdl-color-text--indigo-700 {
+ color: rgb(48,63,159) !important; }
+
+.mdl-color--indigo-700 {
+ background-color: rgb(48,63,159) !important; }
+
+.mdl-color-text--indigo-800 {
+ color: rgb(40,53,147) !important; }
+
+.mdl-color--indigo-800 {
+ background-color: rgb(40,53,147) !important; }
+
+.mdl-color-text--indigo-900 {
+ color: rgb(26,35,126) !important; }
+
+.mdl-color--indigo-900 {
+ background-color: rgb(26,35,126) !important; }
+
+.mdl-color-text--indigo-A100 {
+ color: rgb(140,158,255) !important; }
+
+.mdl-color--indigo-A100 {
+ background-color: rgb(140,158,255) !important; }
+
+.mdl-color-text--indigo-A200 {
+ color: rgb(83,109,254) !important; }
+
+.mdl-color--indigo-A200 {
+ background-color: rgb(83,109,254) !important; }
+
+.mdl-color-text--indigo-A400 {
+ color: rgb(61,90,254) !important; }
+
+.mdl-color--indigo-A400 {
+ background-color: rgb(61,90,254) !important; }
+
+.mdl-color-text--indigo-A700 {
+ color: rgb(48,79,254) !important; }
+
+.mdl-color--indigo-A700 {
+ background-color: rgb(48,79,254) !important; }
+
+.mdl-color-text--blue {
+ color: rgb(33,150,243) !important; }
+
+.mdl-color--blue {
+ background-color: rgb(33,150,243) !important; }
+
+.mdl-color-text--blue-50 {
+ color: rgb(227,242,253) !important; }
+
+.mdl-color--blue-50 {
+ background-color: rgb(227,242,253) !important; }
+
+.mdl-color-text--blue-100 {
+ color: rgb(187,222,251) !important; }
+
+.mdl-color--blue-100 {
+ background-color: rgb(187,222,251) !important; }
+
+.mdl-color-text--blue-200 {
+ color: rgb(144,202,249) !important; }
+
+.mdl-color--blue-200 {
+ background-color: rgb(144,202,249) !important; }
+
+.mdl-color-text--blue-300 {
+ color: rgb(100,181,246) !important; }
+
+.mdl-color--blue-300 {
+ background-color: rgb(100,181,246) !important; }
+
+.mdl-color-text--blue-400 {
+ color: rgb(66,165,245) !important; }
+
+.mdl-color--blue-400 {
+ background-color: rgb(66,165,245) !important; }
+
+.mdl-color-text--blue-500 {
+ color: rgb(33,150,243) !important; }
+
+.mdl-color--blue-500 {
+ background-color: rgb(33,150,243) !important; }
+
+.mdl-color-text--blue-600 {
+ color: rgb(30,136,229) !important; }
+
+.mdl-color--blue-600 {
+ background-color: rgb(30,136,229) !important; }
+
+.mdl-color-text--blue-700 {
+ color: rgb(25,118,210) !important; }
+
+.mdl-color--blue-700 {
+ background-color: rgb(25,118,210) !important; }
+
+.mdl-color-text--blue-800 {
+ color: rgb(21,101,192) !important; }
+
+.mdl-color--blue-800 {
+ background-color: rgb(21,101,192) !important; }
+
+.mdl-color-text--blue-900 {
+ color: rgb(13,71,161) !important; }
+
+.mdl-color--blue-900 {
+ background-color: rgb(13,71,161) !important; }
+
+.mdl-color-text--blue-A100 {
+ color: rgb(130,177,255) !important; }
+
+.mdl-color--blue-A100 {
+ background-color: rgb(130,177,255) !important; }
+
+.mdl-color-text--blue-A200 {
+ color: rgb(68,138,255) !important; }
+
+.mdl-color--blue-A200 {
+ background-color: rgb(68,138,255) !important; }
+
+.mdl-color-text--blue-A400 {
+ color: rgb(41,121,255) !important; }
+
+.mdl-color--blue-A400 {
+ background-color: rgb(41,121,255) !important; }
+
+.mdl-color-text--blue-A700 {
+ color: rgb(41,98,255) !important; }
+
+.mdl-color--blue-A700 {
+ background-color: rgb(41,98,255) !important; }
+
+.mdl-color-text--light-blue {
+ color: rgb(3,169,244) !important; }
+
+.mdl-color--light-blue {
+ background-color: rgb(3,169,244) !important; }
+
+.mdl-color-text--light-blue-50 {
+ color: rgb(225,245,254) !important; }
+
+.mdl-color--light-blue-50 {
+ background-color: rgb(225,245,254) !important; }
+
+.mdl-color-text--light-blue-100 {
+ color: rgb(179,229,252) !important; }
+
+.mdl-color--light-blue-100 {
+ background-color: rgb(179,229,252) !important; }
+
+.mdl-color-text--light-blue-200 {
+ color: rgb(129,212,250) !important; }
+
+.mdl-color--light-blue-200 {
+ background-color: rgb(129,212,250) !important; }
+
+.mdl-color-text--light-blue-300 {
+ color: rgb(79,195,247) !important; }
+
+.mdl-color--light-blue-300 {
+ background-color: rgb(79,195,247) !important; }
+
+.mdl-color-text--light-blue-400 {
+ color: rgb(41,182,246) !important; }
+
+.mdl-color--light-blue-400 {
+ background-color: rgb(41,182,246) !important; }
+
+.mdl-color-text--light-blue-500 {
+ color: rgb(3,169,244) !important; }
+
+.mdl-color--light-blue-500 {
+ background-color: rgb(3,169,244) !important; }
+
+.mdl-color-text--light-blue-600 {
+ color: rgb(3,155,229) !important; }
+
+.mdl-color--light-blue-600 {
+ background-color: rgb(3,155,229) !important; }
+
+.mdl-color-text--light-blue-700 {
+ color: rgb(2,136,209) !important; }
+
+.mdl-color--light-blue-700 {
+ background-color: rgb(2,136,209) !important; }
+
+.mdl-color-text--light-blue-800 {
+ color: rgb(2,119,189) !important; }
+
+.mdl-color--light-blue-800 {
+ background-color: rgb(2,119,189) !important; }
+
+.mdl-color-text--light-blue-900 {
+ color: rgb(1,87,155) !important; }
+
+.mdl-color--light-blue-900 {
+ background-color: rgb(1,87,155) !important; }
+
+.mdl-color-text--light-blue-A100 {
+ color: rgb(128,216,255) !important; }
+
+.mdl-color--light-blue-A100 {
+ background-color: rgb(128,216,255) !important; }
+
+.mdl-color-text--light-blue-A200 {
+ color: rgb(64,196,255) !important; }
+
+.mdl-color--light-blue-A200 {
+ background-color: rgb(64,196,255) !important; }
+
+.mdl-color-text--light-blue-A400 {
+ color: rgb(0,176,255) !important; }
+
+.mdl-color--light-blue-A400 {
+ background-color: rgb(0,176,255) !important; }
+
+.mdl-color-text--light-blue-A700 {
+ color: rgb(0,145,234) !important; }
+
+.mdl-color--light-blue-A700 {
+ background-color: rgb(0,145,234) !important; }
+
+.mdl-color-text--cyan {
+ color: rgb(0,188,212) !important; }
+
+.mdl-color--cyan {
+ background-color: rgb(0,188,212) !important; }
+
+.mdl-color-text--cyan-50 {
+ color: rgb(224,247,250) !important; }
+
+.mdl-color--cyan-50 {
+ background-color: rgb(224,247,250) !important; }
+
+.mdl-color-text--cyan-100 {
+ color: rgb(178,235,242) !important; }
+
+.mdl-color--cyan-100 {
+ background-color: rgb(178,235,242) !important; }
+
+.mdl-color-text--cyan-200 {
+ color: rgb(128,222,234) !important; }
+
+.mdl-color--cyan-200 {
+ background-color: rgb(128,222,234) !important; }
+
+.mdl-color-text--cyan-300 {
+ color: rgb(77,208,225) !important; }
+
+.mdl-color--cyan-300 {
+ background-color: rgb(77,208,225) !important; }
+
+.mdl-color-text--cyan-400 {
+ color: rgb(38,198,218) !important; }
+
+.mdl-color--cyan-400 {
+ background-color: rgb(38,198,218) !important; }
+
+.mdl-color-text--cyan-500 {
+ color: rgb(0,188,212) !important; }
+
+.mdl-color--cyan-500 {
+ background-color: rgb(0,188,212) !important; }
+
+.mdl-color-text--cyan-600 {
+ color: rgb(0,172,193) !important; }
+
+.mdl-color--cyan-600 {
+ background-color: rgb(0,172,193) !important; }
+
+.mdl-color-text--cyan-700 {
+ color: rgb(0,151,167) !important; }
+
+.mdl-color--cyan-700 {
+ background-color: rgb(0,151,167) !important; }
+
+.mdl-color-text--cyan-800 {
+ color: rgb(0,131,143) !important; }
+
+.mdl-color--cyan-800 {
+ background-color: rgb(0,131,143) !important; }
+
+.mdl-color-text--cyan-900 {
+ color: rgb(0,96,100) !important; }
+
+.mdl-color--cyan-900 {
+ background-color: rgb(0,96,100) !important; }
+
+.mdl-color-text--cyan-A100 {
+ color: rgb(132,255,255) !important; }
+
+.mdl-color--cyan-A100 {
+ background-color: rgb(132,255,255) !important; }
+
+.mdl-color-text--cyan-A200 {
+ color: rgb(24,255,255) !important; }
+
+.mdl-color--cyan-A200 {
+ background-color: rgb(24,255,255) !important; }
+
+.mdl-color-text--cyan-A400 {
+ color: rgb(0,229,255) !important; }
+
+.mdl-color--cyan-A400 {
+ background-color: rgb(0,229,255) !important; }
+
+.mdl-color-text--cyan-A700 {
+ color: rgb(0,184,212) !important; }
+
+.mdl-color--cyan-A700 {
+ background-color: rgb(0,184,212) !important; }
+
+.mdl-color-text--teal {
+ color: rgb(0,150,136) !important; }
+
+.mdl-color--teal {
+ background-color: rgb(0,150,136) !important; }
+
+.mdl-color-text--teal-50 {
+ color: rgb(224,242,241) !important; }
+
+.mdl-color--teal-50 {
+ background-color: rgb(224,242,241) !important; }
+
+.mdl-color-text--teal-100 {
+ color: rgb(178,223,219) !important; }
+
+.mdl-color--teal-100 {
+ background-color: rgb(178,223,219) !important; }
+
+.mdl-color-text--teal-200 {
+ color: rgb(128,203,196) !important; }
+
+.mdl-color--teal-200 {
+ background-color: rgb(128,203,196) !important; }
+
+.mdl-color-text--teal-300 {
+ color: rgb(77,182,172) !important; }
+
+.mdl-color--teal-300 {
+ background-color: rgb(77,182,172) !important; }
+
+.mdl-color-text--teal-400 {
+ color: rgb(38,166,154) !important; }
+
+.mdl-color--teal-400 {
+ background-color: rgb(38,166,154) !important; }
+
+.mdl-color-text--teal-500 {
+ color: rgb(0,150,136) !important; }
+
+.mdl-color--teal-500 {
+ background-color: rgb(0,150,136) !important; }
+
+.mdl-color-text--teal-600 {
+ color: rgb(0,137,123) !important; }
+
+.mdl-color--teal-600 {
+ background-color: rgb(0,137,123) !important; }
+
+.mdl-color-text--teal-700 {
+ color: rgb(0,121,107) !important; }
+
+.mdl-color--teal-700 {
+ background-color: rgb(0,121,107) !important; }
+
+.mdl-color-text--teal-800 {
+ color: rgb(0,105,92) !important; }
+
+.mdl-color--teal-800 {
+ background-color: rgb(0,105,92) !important; }
+
+.mdl-color-text--teal-900 {
+ color: rgb(0,77,64) !important; }
+
+.mdl-color--teal-900 {
+ background-color: rgb(0,77,64) !important; }
+
+.mdl-color-text--teal-A100 {
+ color: rgb(167,255,235) !important; }
+
+.mdl-color--teal-A100 {
+ background-color: rgb(167,255,235) !important; }
+
+.mdl-color-text--teal-A200 {
+ color: rgb(100,255,218) !important; }
+
+.mdl-color--teal-A200 {
+ background-color: rgb(100,255,218) !important; }
+
+.mdl-color-text--teal-A400 {
+ color: rgb(29,233,182) !important; }
+
+.mdl-color--teal-A400 {
+ background-color: rgb(29,233,182) !important; }
+
+.mdl-color-text--teal-A700 {
+ color: rgb(0,191,165) !important; }
+
+.mdl-color--teal-A700 {
+ background-color: rgb(0,191,165) !important; }
+
+.mdl-color-text--green {
+ color: rgb(76,175,80) !important; }
+
+.mdl-color--green {
+ background-color: rgb(76,175,80) !important; }
+
+.mdl-color-text--green-50 {
+ color: rgb(232,245,233) !important; }
+
+.mdl-color--green-50 {
+ background-color: rgb(232,245,233) !important; }
+
+.mdl-color-text--green-100 {
+ color: rgb(200,230,201) !important; }
+
+.mdl-color--green-100 {
+ background-color: rgb(200,230,201) !important; }
+
+.mdl-color-text--green-200 {
+ color: rgb(165,214,167) !important; }
+
+.mdl-color--green-200 {
+ background-color: rgb(165,214,167) !important; }
+
+.mdl-color-text--green-300 {
+ color: rgb(129,199,132) !important; }
+
+.mdl-color--green-300 {
+ background-color: rgb(129,199,132) !important; }
+
+.mdl-color-text--green-400 {
+ color: rgb(102,187,106) !important; }
+
+.mdl-color--green-400 {
+ background-color: rgb(102,187,106) !important; }
+
+.mdl-color-text--green-500 {
+ color: rgb(76,175,80) !important; }
+
+.mdl-color--green-500 {
+ background-color: rgb(76,175,80) !important; }
+
+.mdl-color-text--green-600 {
+ color: rgb(67,160,71) !important; }
+
+.mdl-color--green-600 {
+ background-color: rgb(67,160,71) !important; }
+
+.mdl-color-text--green-700 {
+ color: rgb(56,142,60) !important; }
+
+.mdl-color--green-700 {
+ background-color: rgb(56,142,60) !important; }
+
+.mdl-color-text--green-800 {
+ color: rgb(46,125,50) !important; }
+
+.mdl-color--green-800 {
+ background-color: rgb(46,125,50) !important; }
+
+.mdl-color-text--green-900 {
+ color: rgb(27,94,32) !important; }
+
+.mdl-color--green-900 {
+ background-color: rgb(27,94,32) !important; }
+
+.mdl-color-text--green-A100 {
+ color: rgb(185,246,202) !important; }
+
+.mdl-color--green-A100 {
+ background-color: rgb(185,246,202) !important; }
+
+.mdl-color-text--green-A200 {
+ color: rgb(105,240,174) !important; }
+
+.mdl-color--green-A200 {
+ background-color: rgb(105,240,174) !important; }
+
+.mdl-color-text--green-A400 {
+ color: rgb(0,230,118) !important; }
+
+.mdl-color--green-A400 {
+ background-color: rgb(0,230,118) !important; }
+
+.mdl-color-text--green-A700 {
+ color: rgb(0,200,83) !important; }
+
+.mdl-color--green-A700 {
+ background-color: rgb(0,200,83) !important; }
+
+.mdl-color-text--light-green {
+ color: rgb(139,195,74) !important; }
+
+.mdl-color--light-green {
+ background-color: rgb(139,195,74) !important; }
+
+.mdl-color-text--light-green-50 {
+ color: rgb(241,248,233) !important; }
+
+.mdl-color--light-green-50 {
+ background-color: rgb(241,248,233) !important; }
+
+.mdl-color-text--light-green-100 {
+ color: rgb(220,237,200) !important; }
+
+.mdl-color--light-green-100 {
+ background-color: rgb(220,237,200) !important; }
+
+.mdl-color-text--light-green-200 {
+ color: rgb(197,225,165) !important; }
+
+.mdl-color--light-green-200 {
+ background-color: rgb(197,225,165) !important; }
+
+.mdl-color-text--light-green-300 {
+ color: rgb(174,213,129) !important; }
+
+.mdl-color--light-green-300 {
+ background-color: rgb(174,213,129) !important; }
+
+.mdl-color-text--light-green-400 {
+ color: rgb(156,204,101) !important; }
+
+.mdl-color--light-green-400 {
+ background-color: rgb(156,204,101) !important; }
+
+.mdl-color-text--light-green-500 {
+ color: rgb(139,195,74) !important; }
+
+.mdl-color--light-green-500 {
+ background-color: rgb(139,195,74) !important; }
+
+.mdl-color-text--light-green-600 {
+ color: rgb(124,179,66) !important; }
+
+.mdl-color--light-green-600 {
+ background-color: rgb(124,179,66) !important; }
+
+.mdl-color-text--light-green-700 {
+ color: rgb(104,159,56) !important; }
+
+.mdl-color--light-green-700 {
+ background-color: rgb(104,159,56) !important; }
+
+.mdl-color-text--light-green-800 {
+ color: rgb(85,139,47) !important; }
+
+.mdl-color--light-green-800 {
+ background-color: rgb(85,139,47) !important; }
+
+.mdl-color-text--light-green-900 {
+ color: rgb(51,105,30) !important; }
+
+.mdl-color--light-green-900 {
+ background-color: rgb(51,105,30) !important; }
+
+.mdl-color-text--light-green-A100 {
+ color: rgb(204,255,144) !important; }
+
+.mdl-color--light-green-A100 {
+ background-color: rgb(204,255,144) !important; }
+
+.mdl-color-text--light-green-A200 {
+ color: rgb(178,255,89) !important; }
+
+.mdl-color--light-green-A200 {
+ background-color: rgb(178,255,89) !important; }
+
+.mdl-color-text--light-green-A400 {
+ color: rgb(118,255,3) !important; }
+
+.mdl-color--light-green-A400 {
+ background-color: rgb(118,255,3) !important; }
+
+.mdl-color-text--light-green-A700 {
+ color: rgb(100,221,23) !important; }
+
+.mdl-color--light-green-A700 {
+ background-color: rgb(100,221,23) !important; }
+
+.mdl-color-text--lime {
+ color: rgb(205,220,57) !important; }
+
+.mdl-color--lime {
+ background-color: rgb(205,220,57) !important; }
+
+.mdl-color-text--lime-50 {
+ color: rgb(249,251,231) !important; }
+
+.mdl-color--lime-50 {
+ background-color: rgb(249,251,231) !important; }
+
+.mdl-color-text--lime-100 {
+ color: rgb(240,244,195) !important; }
+
+.mdl-color--lime-100 {
+ background-color: rgb(240,244,195) !important; }
+
+.mdl-color-text--lime-200 {
+ color: rgb(230,238,156) !important; }
+
+.mdl-color--lime-200 {
+ background-color: rgb(230,238,156) !important; }
+
+.mdl-color-text--lime-300 {
+ color: rgb(220,231,117) !important; }
+
+.mdl-color--lime-300 {
+ background-color: rgb(220,231,117) !important; }
+
+.mdl-color-text--lime-400 {
+ color: rgb(212,225,87) !important; }
+
+.mdl-color--lime-400 {
+ background-color: rgb(212,225,87) !important; }
+
+.mdl-color-text--lime-500 {
+ color: rgb(205,220,57) !important; }
+
+.mdl-color--lime-500 {
+ background-color: rgb(205,220,57) !important; }
+
+.mdl-color-text--lime-600 {
+ color: rgb(192,202,51) !important; }
+
+.mdl-color--lime-600 {
+ background-color: rgb(192,202,51) !important; }
+
+.mdl-color-text--lime-700 {
+ color: rgb(175,180,43) !important; }
+
+.mdl-color--lime-700 {
+ background-color: rgb(175,180,43) !important; }
+
+.mdl-color-text--lime-800 {
+ color: rgb(158,157,36) !important; }
+
+.mdl-color--lime-800 {
+ background-color: rgb(158,157,36) !important; }
+
+.mdl-color-text--lime-900 {
+ color: rgb(130,119,23) !important; }
+
+.mdl-color--lime-900 {
+ background-color: rgb(130,119,23) !important; }
+
+.mdl-color-text--lime-A100 {
+ color: rgb(244,255,129) !important; }
+
+.mdl-color--lime-A100 {
+ background-color: rgb(244,255,129) !important; }
+
+.mdl-color-text--lime-A200 {
+ color: rgb(238,255,65) !important; }
+
+.mdl-color--lime-A200 {
+ background-color: rgb(238,255,65) !important; }
+
+.mdl-color-text--lime-A400 {
+ color: rgb(198,255,0) !important; }
+
+.mdl-color--lime-A400 {
+ background-color: rgb(198,255,0) !important; }
+
+.mdl-color-text--lime-A700 {
+ color: rgb(174,234,0) !important; }
+
+.mdl-color--lime-A700 {
+ background-color: rgb(174,234,0) !important; }
+
+.mdl-color-text--yellow {
+ color: rgb(255,235,59) !important; }
+
+.mdl-color--yellow {
+ background-color: rgb(255,235,59) !important; }
+
+.mdl-color-text--yellow-50 {
+ color: rgb(255,253,231) !important; }
+
+.mdl-color--yellow-50 {
+ background-color: rgb(255,253,231) !important; }
+
+.mdl-color-text--yellow-100 {
+ color: rgb(255,249,196) !important; }
+
+.mdl-color--yellow-100 {
+ background-color: rgb(255,249,196) !important; }
+
+.mdl-color-text--yellow-200 {
+ color: rgb(255,245,157) !important; }
+
+.mdl-color--yellow-200 {
+ background-color: rgb(255,245,157) !important; }
+
+.mdl-color-text--yellow-300 {
+ color: rgb(255,241,118) !important; }
+
+.mdl-color--yellow-300 {
+ background-color: rgb(255,241,118) !important; }
+
+.mdl-color-text--yellow-400 {
+ color: rgb(255,238,88) !important; }
+
+.mdl-color--yellow-400 {
+ background-color: rgb(255,238,88) !important; }
+
+.mdl-color-text--yellow-500 {
+ color: rgb(255,235,59) !important; }
+
+.mdl-color--yellow-500 {
+ background-color: rgb(255,235,59) !important; }
+
+.mdl-color-text--yellow-600 {
+ color: rgb(253,216,53) !important; }
+
+.mdl-color--yellow-600 {
+ background-color: rgb(253,216,53) !important; }
+
+.mdl-color-text--yellow-700 {
+ color: rgb(251,192,45) !important; }
+
+.mdl-color--yellow-700 {
+ background-color: rgb(251,192,45) !important; }
+
+.mdl-color-text--yellow-800 {
+ color: rgb(249,168,37) !important; }
+
+.mdl-color--yellow-800 {
+ background-color: rgb(249,168,37) !important; }
+
+.mdl-color-text--yellow-900 {
+ color: rgb(245,127,23) !important; }
+
+.mdl-color--yellow-900 {
+ background-color: rgb(245,127,23) !important; }
+
+.mdl-color-text--yellow-A100 {
+ color: rgb(255,255,141) !important; }
+
+.mdl-color--yellow-A100 {
+ background-color: rgb(255,255,141) !important; }
+
+.mdl-color-text--yellow-A200 {
+ color: rgb(255,255,0) !important; }
+
+.mdl-color--yellow-A200 {
+ background-color: rgb(255,255,0) !important; }
+
+.mdl-color-text--yellow-A400 {
+ color: rgb(255,234,0) !important; }
+
+.mdl-color--yellow-A400 {
+ background-color: rgb(255,234,0) !important; }
+
+.mdl-color-text--yellow-A700 {
+ color: rgb(255,214,0) !important; }
+
+.mdl-color--yellow-A700 {
+ background-color: rgb(255,214,0) !important; }
+
+.mdl-color-text--amber {
+ color: rgb(255,193,7) !important; }
+
+.mdl-color--amber {
+ background-color: rgb(255,193,7) !important; }
+
+.mdl-color-text--amber-50 {
+ color: rgb(255,248,225) !important; }
+
+.mdl-color--amber-50 {
+ background-color: rgb(255,248,225) !important; }
+
+.mdl-color-text--amber-100 {
+ color: rgb(255,236,179) !important; }
+
+.mdl-color--amber-100 {
+ background-color: rgb(255,236,179) !important; }
+
+.mdl-color-text--amber-200 {
+ color: rgb(255,224,130) !important; }
+
+.mdl-color--amber-200 {
+ background-color: rgb(255,224,130) !important; }
+
+.mdl-color-text--amber-300 {
+ color: rgb(255,213,79) !important; }
+
+.mdl-color--amber-300 {
+ background-color: rgb(255,213,79) !important; }
+
+.mdl-color-text--amber-400 {
+ color: rgb(255,202,40) !important; }
+
+.mdl-color--amber-400 {
+ background-color: rgb(255,202,40) !important; }
+
+.mdl-color-text--amber-500 {
+ color: rgb(255,193,7) !important; }
+
+.mdl-color--amber-500 {
+ background-color: rgb(255,193,7) !important; }
+
+.mdl-color-text--amber-600 {
+ color: rgb(255,179,0) !important; }
+
+.mdl-color--amber-600 {
+ background-color: rgb(255,179,0) !important; }
+
+.mdl-color-text--amber-700 {
+ color: rgb(255,160,0) !important; }
+
+.mdl-color--amber-700 {
+ background-color: rgb(255,160,0) !important; }
+
+.mdl-color-text--amber-800 {
+ color: rgb(255,143,0) !important; }
+
+.mdl-color--amber-800 {
+ background-color: rgb(255,143,0) !important; }
+
+.mdl-color-text--amber-900 {
+ color: rgb(255,111,0) !important; }
+
+.mdl-color--amber-900 {
+ background-color: rgb(255,111,0) !important; }
+
+.mdl-color-text--amber-A100 {
+ color: rgb(255,229,127) !important; }
+
+.mdl-color--amber-A100 {
+ background-color: rgb(255,229,127) !important; }
+
+.mdl-color-text--amber-A200 {
+ color: rgb(255,215,64) !important; }
+
+.mdl-color--amber-A200 {
+ background-color: rgb(255,215,64) !important; }
+
+.mdl-color-text--amber-A400 {
+ color: rgb(255,196,0) !important; }
+
+.mdl-color--amber-A400 {
+ background-color: rgb(255,196,0) !important; }
+
+.mdl-color-text--amber-A700 {
+ color: rgb(255,171,0) !important; }
+
+.mdl-color--amber-A700 {
+ background-color: rgb(255,171,0) !important; }
+
+.mdl-color-text--orange {
+ color: rgb(255,152,0) !important; }
+
+.mdl-color--orange {
+ background-color: rgb(255,152,0) !important; }
+
+.mdl-color-text--orange-50 {
+ color: rgb(255,243,224) !important; }
+
+.mdl-color--orange-50 {
+ background-color: rgb(255,243,224) !important; }
+
+.mdl-color-text--orange-100 {
+ color: rgb(255,224,178) !important; }
+
+.mdl-color--orange-100 {
+ background-color: rgb(255,224,178) !important; }
+
+.mdl-color-text--orange-200 {
+ color: rgb(255,204,128) !important; }
+
+.mdl-color--orange-200 {
+ background-color: rgb(255,204,128) !important; }
+
+.mdl-color-text--orange-300 {
+ color: rgb(255,183,77) !important; }
+
+.mdl-color--orange-300 {
+ background-color: rgb(255,183,77) !important; }
+
+.mdl-color-text--orange-400 {
+ color: rgb(255,167,38) !important; }
+
+.mdl-color--orange-400 {
+ background-color: rgb(255,167,38) !important; }
+
+.mdl-color-text--orange-500 {
+ color: rgb(255,152,0) !important; }
+
+.mdl-color--orange-500 {
+ background-color: rgb(255,152,0) !important; }
+
+.mdl-color-text--orange-600 {
+ color: rgb(251,140,0) !important; }
+
+.mdl-color--orange-600 {
+ background-color: rgb(251,140,0) !important; }
+
+.mdl-color-text--orange-700 {
+ color: rgb(245,124,0) !important; }
+
+.mdl-color--orange-700 {
+ background-color: rgb(245,124,0) !important; }
+
+.mdl-color-text--orange-800 {
+ color: rgb(239,108,0) !important; }
+
+.mdl-color--orange-800 {
+ background-color: rgb(239,108,0) !important; }
+
+.mdl-color-text--orange-900 {
+ color: rgb(230,81,0) !important; }
+
+.mdl-color--orange-900 {
+ background-color: rgb(230,81,0) !important; }
+
+.mdl-color-text--orange-A100 {
+ color: rgb(255,209,128) !important; }
+
+.mdl-color--orange-A100 {
+ background-color: rgb(255,209,128) !important; }
+
+.mdl-color-text--orange-A200 {
+ color: rgb(255,171,64) !important; }
+
+.mdl-color--orange-A200 {
+ background-color: rgb(255,171,64) !important; }
+
+.mdl-color-text--orange-A400 {
+ color: rgb(255,145,0) !important; }
+
+.mdl-color--orange-A400 {
+ background-color: rgb(255,145,0) !important; }
+
+.mdl-color-text--orange-A700 {
+ color: rgb(255,109,0) !important; }
+
+.mdl-color--orange-A700 {
+ background-color: rgb(255,109,0) !important; }
+
+.mdl-color-text--deep-orange {
+ color: rgb(255,87,34) !important; }
+
+.mdl-color--deep-orange {
+ background-color: rgb(255,87,34) !important; }
+
+.mdl-color-text--deep-orange-50 {
+ color: rgb(251,233,231) !important; }
+
+.mdl-color--deep-orange-50 {
+ background-color: rgb(251,233,231) !important; }
+
+.mdl-color-text--deep-orange-100 {
+ color: rgb(255,204,188) !important; }
+
+.mdl-color--deep-orange-100 {
+ background-color: rgb(255,204,188) !important; }
+
+.mdl-color-text--deep-orange-200 {
+ color: rgb(255,171,145) !important; }
+
+.mdl-color--deep-orange-200 {
+ background-color: rgb(255,171,145) !important; }
+
+.mdl-color-text--deep-orange-300 {
+ color: rgb(255,138,101) !important; }
+
+.mdl-color--deep-orange-300 {
+ background-color: rgb(255,138,101) !important; }
+
+.mdl-color-text--deep-orange-400 {
+ color: rgb(255,112,67) !important; }
+
+.mdl-color--deep-orange-400 {
+ background-color: rgb(255,112,67) !important; }
+
+.mdl-color-text--deep-orange-500 {
+ color: rgb(255,87,34) !important; }
+
+.mdl-color--deep-orange-500 {
+ background-color: rgb(255,87,34) !important; }
+
+.mdl-color-text--deep-orange-600 {
+ color: rgb(244,81,30) !important; }
+
+.mdl-color--deep-orange-600 {
+ background-color: rgb(244,81,30) !important; }
+
+.mdl-color-text--deep-orange-700 {
+ color: rgb(230,74,25) !important; }
+
+.mdl-color--deep-orange-700 {
+ background-color: rgb(230,74,25) !important; }
+
+.mdl-color-text--deep-orange-800 {
+ color: rgb(216,67,21) !important; }
+
+.mdl-color--deep-orange-800 {
+ background-color: rgb(216,67,21) !important; }
+
+.mdl-color-text--deep-orange-900 {
+ color: rgb(191,54,12) !important; }
+
+.mdl-color--deep-orange-900 {
+ background-color: rgb(191,54,12) !important; }
+
+.mdl-color-text--deep-orange-A100 {
+ color: rgb(255,158,128) !important; }
+
+.mdl-color--deep-orange-A100 {
+ background-color: rgb(255,158,128) !important; }
+
+.mdl-color-text--deep-orange-A200 {
+ color: rgb(255,110,64) !important; }
+
+.mdl-color--deep-orange-A200 {
+ background-color: rgb(255,110,64) !important; }
+
+.mdl-color-text--deep-orange-A400 {
+ color: rgb(255,61,0) !important; }
+
+.mdl-color--deep-orange-A400 {
+ background-color: rgb(255,61,0) !important; }
+
+.mdl-color-text--deep-orange-A700 {
+ color: rgb(221,44,0) !important; }
+
+.mdl-color--deep-orange-A700 {
+ background-color: rgb(221,44,0) !important; }
+
+.mdl-color-text--brown {
+ color: rgb(121,85,72) !important; }
+
+.mdl-color--brown {
+ background-color: rgb(121,85,72) !important; }
+
+.mdl-color-text--brown-50 {
+ color: rgb(239,235,233) !important; }
+
+.mdl-color--brown-50 {
+ background-color: rgb(239,235,233) !important; }
+
+.mdl-color-text--brown-100 {
+ color: rgb(215,204,200) !important; }
+
+.mdl-color--brown-100 {
+ background-color: rgb(215,204,200) !important; }
+
+.mdl-color-text--brown-200 {
+ color: rgb(188,170,164) !important; }
+
+.mdl-color--brown-200 {
+ background-color: rgb(188,170,164) !important; }
+
+.mdl-color-text--brown-300 {
+ color: rgb(161,136,127) !important; }
+
+.mdl-color--brown-300 {
+ background-color: rgb(161,136,127) !important; }
+
+.mdl-color-text--brown-400 {
+ color: rgb(141,110,99) !important; }
+
+.mdl-color--brown-400 {
+ background-color: rgb(141,110,99) !important; }
+
+.mdl-color-text--brown-500 {
+ color: rgb(121,85,72) !important; }
+
+.mdl-color--brown-500 {
+ background-color: rgb(121,85,72) !important; }
+
+.mdl-color-text--brown-600 {
+ color: rgb(109,76,65) !important; }
+
+.mdl-color--brown-600 {
+ background-color: rgb(109,76,65) !important; }
+
+.mdl-color-text--brown-700 {
+ color: rgb(93,64,55) !important; }
+
+.mdl-color--brown-700 {
+ background-color: rgb(93,64,55) !important; }
+
+.mdl-color-text--brown-800 {
+ color: rgb(78,52,46) !important; }
+
+.mdl-color--brown-800 {
+ background-color: rgb(78,52,46) !important; }
+
+.mdl-color-text--brown-900 {
+ color: rgb(62,39,35) !important; }
+
+.mdl-color--brown-900 {
+ background-color: rgb(62,39,35) !important; }
+
+.mdl-color-text--grey {
+ color: rgb(158,158,158) !important; }
+
+.mdl-color--grey {
+ background-color: rgb(158,158,158) !important; }
+
+.mdl-color-text--grey-50 {
+ color: rgb(250,250,250) !important; }
+
+.mdl-color--grey-50 {
+ background-color: rgb(250,250,250) !important; }
+
+.mdl-color-text--grey-100 {
+ color: rgb(245,245,245) !important; }
+
+.mdl-color--grey-100 {
+ background-color: rgb(245,245,245) !important; }
+
+.mdl-color-text--grey-200 {
+ color: rgb(238,238,238) !important; }
+
+.mdl-color--grey-200 {
+ background-color: rgb(238,238,238) !important; }
+
+.mdl-color-text--grey-300 {
+ color: rgb(224,224,224) !important; }
+
+.mdl-color--grey-300 {
+ background-color: rgb(224,224,224) !important; }
+
+.mdl-color-text--grey-400 {
+ color: rgb(189,189,189) !important; }
+
+.mdl-color--grey-400 {
+ background-color: rgb(189,189,189) !important; }
+
+.mdl-color-text--grey-500 {
+ color: rgb(158,158,158) !important; }
+
+.mdl-color--grey-500 {
+ background-color: rgb(158,158,158) !important; }
+
+.mdl-color-text--grey-600 {
+ color: rgb(117,117,117) !important; }
+
+.mdl-color--grey-600 {
+ background-color: rgb(117,117,117) !important; }
+
+.mdl-color-text--grey-700 {
+ color: rgb(97,97,97) !important; }
+
+.mdl-color--grey-700 {
+ background-color: rgb(97,97,97) !important; }
+
+.mdl-color-text--grey-800 {
+ color: rgb(66,66,66) !important; }
+
+.mdl-color--grey-800 {
+ background-color: rgb(66,66,66) !important; }
+
+.mdl-color-text--grey-900 {
+ color: rgb(33,33,33) !important; }
+
+.mdl-color--grey-900 {
+ background-color: rgb(33,33,33) !important; }
+
+.mdl-color-text--blue-grey {
+ color: rgb(96,125,139) !important; }
+
+.mdl-color--blue-grey {
+ background-color: rgb(96,125,139) !important; }
+
+.mdl-color-text--blue-grey-50 {
+ color: rgb(236,239,241) !important; }
+
+.mdl-color--blue-grey-50 {
+ background-color: rgb(236,239,241) !important; }
+
+.mdl-color-text--blue-grey-100 {
+ color: rgb(207,216,220) !important; }
+
+.mdl-color--blue-grey-100 {
+ background-color: rgb(207,216,220) !important; }
+
+.mdl-color-text--blue-grey-200 {
+ color: rgb(176,190,197) !important; }
+
+.mdl-color--blue-grey-200 {
+ background-color: rgb(176,190,197) !important; }
+
+.mdl-color-text--blue-grey-300 {
+ color: rgb(144,164,174) !important; }
+
+.mdl-color--blue-grey-300 {
+ background-color: rgb(144,164,174) !important; }
+
+.mdl-color-text--blue-grey-400 {
+ color: rgb(120,144,156) !important; }
+
+.mdl-color--blue-grey-400 {
+ background-color: rgb(120,144,156) !important; }
+
+.mdl-color-text--blue-grey-500 {
+ color: rgb(96,125,139) !important; }
+
+.mdl-color--blue-grey-500 {
+ background-color: rgb(96,125,139) !important; }
+
+.mdl-color-text--blue-grey-600 {
+ color: rgb(84,110,122) !important; }
+
+.mdl-color--blue-grey-600 {
+ background-color: rgb(84,110,122) !important; }
+
+.mdl-color-text--blue-grey-700 {
+ color: rgb(69,90,100) !important; }
+
+.mdl-color--blue-grey-700 {
+ background-color: rgb(69,90,100) !important; }
+
+.mdl-color-text--blue-grey-800 {
+ color: rgb(55,71,79) !important; }
+
+.mdl-color--blue-grey-800 {
+ background-color: rgb(55,71,79) !important; }
+
+.mdl-color-text--blue-grey-900 {
+ color: rgb(38,50,56) !important; }
+
+.mdl-color--blue-grey-900 {
+ background-color: rgb(38,50,56) !important; }
+
+.mdl-color--black {
+ background-color: rgb(0,0,0) !important; }
+
+.mdl-color-text--black {
+ color: rgb(0,0,0) !important; }
+
+.mdl-color--white {
+ background-color: rgb(255,255,255) !important; }
+
+.mdl-color-text--white {
+ color: rgb(255,255,255) !important; }
+
+.mdl-color--primary {
+ background-color: rgb(63,81,181) !important; }
+
+.mdl-color--primary-contrast {
+ background-color: rgb(255,255,255) !important; }
+
+.mdl-color--primary-dark {
+ background-color: rgb(48,63,159) !important; }
+
+.mdl-color--accent {
+ background-color: rgb(255,64,129) !important; }
+
+.mdl-color--accent-contrast {
+ background-color: rgb(255,255,255) !important; }
+
+.mdl-color-text--primary {
+ color: rgb(63,81,181) !important; }
+
+.mdl-color-text--primary-contrast {
+ color: rgb(255,255,255) !important; }
+
+.mdl-color-text--primary-dark {
+ color: rgb(48,63,159) !important; }
+
+.mdl-color-text--accent {
+ color: rgb(255,64,129) !important; }
+
+.mdl-color-text--accent-contrast {
+ color: rgb(255,255,255) !important; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-ripple {
+ background: rgb(0,0,0);
+ border-radius: 50%;
+ height: 50px;
+ left: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 50px;
+ overflow: hidden; }
+ .mdl-ripple.is-animating {
+ transition: width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1);
+ transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
+ transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1); }
+ .mdl-ripple.is-visible {
+ opacity: 0.3; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-animation--default {
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+.mdl-animation--fast-out-slow-in {
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+.mdl-animation--linear-out-slow-in {
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+
+.mdl-animation--fast-out-linear-in {
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-badge {
+ position: relative;
+ white-space: nowrap;
+ margin-right: 24px; }
+ .mdl-badge:not([data-badge]) {
+ margin-right: auto; }
+ .mdl-badge[data-badge]:after {
+ content: attr(data-badge);
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-content: center;
+ -ms-flex-line-pack: center;
+ align-content: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: absolute;
+ top: -11px;
+ right: -24px;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: 600;
+ font-size: 12px;
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ background: rgb(255,64,129);
+ color: rgb(255,255,255); }
+ .mdl-button .mdl-badge[data-badge]:after {
+ top: -10px;
+ right: -5px; }
+ .mdl-badge.mdl-badge--no-background[data-badge]:after {
+ color: rgb(255,64,129);
+ background: rgba(255,255,255,0.2);
+ box-shadow: 0 0 1px gray; }
+ .mdl-badge.mdl-badge--overlap {
+ margin-right: 10px; }
+ .mdl-badge.mdl-badge--overlap:after {
+ right: -10px; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-button {
+ background: transparent;
+ border: none;
+ border-radius: 2px;
+ color: rgb(0,0,0);
+ position: relative;
+ height: 36px;
+ margin: 0;
+ min-width: 64px;
+ padding: 0 16px;
+ display: inline-block;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ text-transform: uppercase;
+ line-height: 1;
+ letter-spacing: 0;
+ overflow: hidden;
+ will-change: box-shadow;
+ transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ outline: none;
+ cursor: pointer;
+ text-decoration: none;
+ text-align: center;
+ line-height: 36px;
+ vertical-align: middle; }
+ .mdl-button::-moz-focus-inner {
+ border: 0; }
+ .mdl-button:hover {
+ background-color: rgba(158,158,158, 0.20); }
+ .mdl-button:focus:not(:active) {
+ background-color: rgba(0,0,0, 0.12); }
+ .mdl-button:active {
+ background-color: rgba(158,158,158, 0.40); }
+ .mdl-button.mdl-button--colored {
+ color: rgb(63,81,181); }
+ .mdl-button.mdl-button--colored:focus:not(:active) {
+ background-color: rgba(0,0,0, 0.12); }
+
+input.mdl-button[type="submit"] {
+ -webkit-appearance: none; }
+
+.mdl-button--raised {
+ background: rgba(158,158,158, 0.20);
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+ .mdl-button--raised:active {
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+ background-color: rgba(158,158,158, 0.40); }
+ .mdl-button--raised:focus:not(:active) {
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
+ background-color: rgba(158,158,158, 0.40); }
+ .mdl-button--raised.mdl-button--colored {
+ background: rgb(63,81,181);
+ color: rgb(255,255,255); }
+ .mdl-button--raised.mdl-button--colored:hover {
+ background-color: rgb(63,81,181); }
+ .mdl-button--raised.mdl-button--colored:active {
+ background-color: rgb(63,81,181); }
+ .mdl-button--raised.mdl-button--colored:focus:not(:active) {
+ background-color: rgb(63,81,181); }
+ .mdl-button--raised.mdl-button--colored .mdl-ripple {
+ background: rgb(255,255,255); }
+
+.mdl-button--fab {
+ border-radius: 50%;
+ font-size: 24px;
+ height: 56px;
+ margin: auto;
+ min-width: 56px;
+ width: 56px;
+ padding: 0;
+ overflow: hidden;
+ background: rgba(158,158,158, 0.20);
+ box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
+ position: relative;
+ line-height: normal; }
+ .mdl-button--fab .material-icons {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-12px, -12px);
+ transform: translate(-12px, -12px);
+ line-height: 24px;
+ width: 24px; }
+ .mdl-button--fab.mdl-button--mini-fab {
+ height: 40px;
+ min-width: 40px;
+ width: 40px; }
+ .mdl-button--fab .mdl-button__ripple-container {
+ border-radius: 50%;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+ .mdl-button--fab:active {
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+ background-color: rgba(158,158,158, 0.40); }
+ .mdl-button--fab:focus:not(:active) {
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
+ background-color: rgba(158,158,158, 0.40); }
+ .mdl-button--fab.mdl-button--colored {
+ background: rgb(255,64,129);
+ color: rgb(255,255,255); }
+ .mdl-button--fab.mdl-button--colored:hover {
+ background-color: rgb(255,64,129); }
+ .mdl-button--fab.mdl-button--colored:focus:not(:active) {
+ background-color: rgb(255,64,129); }
+ .mdl-button--fab.mdl-button--colored:active {
+ background-color: rgb(255,64,129); }
+ .mdl-button--fab.mdl-button--colored .mdl-ripple {
+ background: rgb(255,255,255); }
+
+.mdl-button--icon {
+ border-radius: 50%;
+ font-size: 24px;
+ height: 32px;
+ margin-left: 0;
+ margin-right: 0;
+ min-width: 32px;
+ width: 32px;
+ padding: 0;
+ overflow: hidden;
+ color: inherit;
+ line-height: normal; }
+ .mdl-button--icon .material-icons {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-12px, -12px);
+ transform: translate(-12px, -12px);
+ line-height: 24px;
+ width: 24px; }
+ .mdl-button--icon.mdl-button--mini-icon {
+ height: 24px;
+ min-width: 24px;
+ width: 24px; }
+ .mdl-button--icon.mdl-button--mini-icon .material-icons {
+ top: 0px;
+ left: 0px; }
+ .mdl-button--icon .mdl-button__ripple-container {
+ border-radius: 50%;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+
+.mdl-button__ripple-container {
+ display: block;
+ height: 100%;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ z-index: 0;
+ overflow: hidden; }
+ .mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple,
+ .mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {
+ background-color: transparent; }
+
+.mdl-button--primary.mdl-button--primary {
+ color: rgb(63,81,181); }
+ .mdl-button--primary.mdl-button--primary .mdl-ripple {
+ background: rgb(255,255,255); }
+ .mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {
+ color: rgb(255,255,255);
+ background-color: rgb(63,81,181); }
+
+.mdl-button--accent.mdl-button--accent {
+ color: rgb(255,64,129); }
+ .mdl-button--accent.mdl-button--accent .mdl-ripple {
+ background: rgb(255,255,255); }
+ .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
+ color: rgb(255,255,255);
+ background-color: rgb(255,64,129); }
+
+.mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled {
+ color: rgba(0,0,0, 0.26);
+ cursor: default;
+ background-color: transparent; }
+
+.mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
+ background-color: rgba(0,0,0, 0.12);
+ color: rgba(0,0,0, 0.26); }
+
+.mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
+ background-color: rgba(0,0,0, 0.12);
+ color: rgba(0,0,0, 0.26);
+ box-shadow: none; }
+
+.mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled {
+ color: rgba(0,0,0, 0.26); }
+
+.mdl-button .material-icons {
+ vertical-align: middle; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-card {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 16px;
+ font-weight: 400;
+ min-height: 200px;
+ overflow: hidden;
+ width: 330px;
+ z-index: 1;
+ position: relative;
+ background: rgb(255,255,255);
+ border-radius: 2px;
+ box-sizing: border-box; }
+
+.mdl-card__media {
+ background-color: rgb(255,64,129);
+ background-repeat: repeat;
+ background-position: 50% 50%;
+ background-size: cover;
+ background-origin: padding-box;
+ background-attachment: scroll;
+ box-sizing: border-box; }
+
+.mdl-card__title {
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: rgb(0,0,0);
+ display: block;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-justify-content: stretch;
+ -ms-flex-pack: stretch;
+ justify-content: stretch;
+ line-height: normal;
+ padding: 16px 16px;
+ -webkit-perspective-origin: 165px 56px;
+ perspective-origin: 165px 56px;
+ -webkit-transform-origin: 165px 56px;
+ transform-origin: 165px 56px;
+ box-sizing: border-box; }
+ .mdl-card__title.mdl-card--border {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+
+.mdl-card__title-text {
+ -webkit-align-self: flex-end;
+ -ms-flex-item-align: end;
+ align-self: flex-end;
+ color: inherit;
+ display: block;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ font-size: 24px;
+ font-weight: 300;
+ line-height: normal;
+ overflow: hidden;
+ -webkit-transform-origin: 149px 48px;
+ transform-origin: 149px 48px;
+ margin: 0; }
+
+.mdl-card__subtitle-text {
+ font-size: 14px;
+ color: rgba(0,0,0, 0.54);
+ margin: 0; }
+
+.mdl-card__supporting-text {
+ color: rgba(0,0,0, 0.54);
+ font-size: 1rem;
+ line-height: 18px;
+ overflow: hidden;
+ padding: 16px 16px;
+ width: 90%; }
+ .mdl-card__supporting-text.mdl-card--border {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+
+.mdl-card__actions {
+ font-size: 16px;
+ line-height: normal;
+ width: 100%;
+ background-color: transparent;
+ padding: 8px;
+ box-sizing: border-box; }
+ .mdl-card__actions.mdl-card--border {
+ border-top: 1px solid rgba(0, 0, 0, 0.1); }
+
+.mdl-card--expand {
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; }
+
+.mdl-card__menu {
+ position: absolute;
+ right: 16px;
+ top: 16px; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-checkbox {
+ position: relative;
+ z-index: 1;
+ vertical-align: middle;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 100%;
+ height: 24px;
+ margin: 0;
+ padding: 0; }
+ .mdl-checkbox.is-upgraded {
+ padding-left: 24px; }
+
+.mdl-checkbox__input {
+ line-height: 24px; }
+ .mdl-checkbox.is-upgraded .mdl-checkbox__input {
+ position: absolute;
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ -ms-appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: none; }
+
+.mdl-checkbox__box-outline {
+ position: absolute;
+ top: 3px;
+ left: 0;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 16px;
+ height: 16px;
+ margin: 0;
+ cursor: pointer;
+ overflow: hidden;
+ border: 2px solid rgba(0,0,0, 0.54);
+ border-radius: 2px;
+ z-index: 2; }
+ .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+ border: 2px solid rgb(63,81,181); }
+ fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
+ .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
+ border: 2px solid rgba(0,0,0, 0.26);
+ cursor: auto; }
+
+.mdl-checkbox__focus-helper {
+ position: absolute;
+ top: 3px;
+ left: 0;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background-color: transparent; }
+ .mdl-checkbox.is-focused .mdl-checkbox__focus-helper {
+ box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.1); }
+ .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
+ box-shadow: 0 0 0px 8px rgba(63,81,181, 0.26);
+ background-color: rgba(63,81,181, 0.26); }
+
+.mdl-checkbox__tick-outline {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
+ mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
+ background: transparent;
+ transition-duration: 0.28s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-property: background; }
+ .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
+ background: rgb(63,81,181) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); }
+ fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
+ .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
+ background: rgba(0,0,0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); }
+
+.mdl-checkbox__label {
+ position: relative;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 24px;
+ margin: 0; }
+ fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
+ .mdl-checkbox.is-disabled .mdl-checkbox__label {
+ color: rgba(0,0,0, 0.26);
+ cursor: auto; }
+
+.mdl-checkbox__ripple-container {
+ position: absolute;
+ z-index: 2;
+ top: -6px;
+ left: -10px;
+ box-sizing: border-box;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ cursor: pointer;
+ overflow: hidden;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+ .mdl-checkbox__ripple-container .mdl-ripple {
+ background: rgb(63,81,181); }
+ fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container,
+ .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container {
+ cursor: auto; }
+ fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
+ .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
+ background: transparent; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-chip {
+ height: 32px;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ line-height: 32px;
+ padding: 0 12px;
+ border: 0;
+ border-radius: 16px;
+ background-color: #dedede;
+ display: inline-block;
+ color: rgba(0,0,0, 0.87);
+ margin: 2px 0;
+ font-size: 0;
+ white-space: nowrap; }
+ .mdl-chip__text {
+ font-size: 13px;
+ vertical-align: middle;
+ display: inline-block; }
+ .mdl-chip__action {
+ height: 24px;
+ width: 24px;
+ background: transparent;
+ opacity: 0.54;
+ display: inline-block;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+ padding: 0;
+ margin: 0 0 0 4px;
+ font-size: 13px;
+ text-decoration: none;
+ color: rgba(0,0,0, 0.87);
+ border: none;
+ outline: none;
+ overflow: hidden; }
+ .mdl-chip__contact {
+ height: 32px;
+ width: 32px;
+ border-radius: 16px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+ overflow: hidden;
+ text-align: center;
+ font-size: 18px;
+ line-height: 32px; }
+ .mdl-chip:focus {
+ outline: 0;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+ .mdl-chip:active {
+ background-color: #d6d6d6; }
+ .mdl-chip--deletable {
+ padding-right: 4px; }
+ .mdl-chip--contact {
+ padding-left: 0; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-data-table {
+ position: relative;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-collapse: collapse;
+ white-space: nowrap;
+ font-size: 13px;
+ background-color: rgb(255,255,255); }
+ .mdl-data-table thead {
+ padding-bottom: 3px; }
+ .mdl-data-table thead .mdl-data-table__select {
+ margin-top: 0; }
+ .mdl-data-table tbody tr {
+ position: relative;
+ height: 48px;
+ transition-duration: 0.28s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-property: background-color; }
+ .mdl-data-table tbody tr.is-selected {
+ background-color: #e0e0e0; }
+ .mdl-data-table tbody tr:hover {
+ background-color: #eeeeee; }
+ .mdl-data-table td, .mdl-data-table th {
+ padding: 0 18px 12px 18px;
+ text-align: right; }
+ .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
+ padding-left: 24px; }
+ .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
+ padding-right: 24px; }
+ .mdl-data-table td {
+ position: relative;
+ vertical-align: middle;
+ height: 48px;
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+ padding-top: 12px;
+ box-sizing: border-box; }
+ .mdl-data-table td .mdl-data-table__select {
+ vertical-align: middle; }
+ .mdl-data-table th {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 24px;
+ letter-spacing: 0;
+ height: 48px;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.54);
+ padding-bottom: 8px;
+ box-sizing: border-box; }
+ .mdl-data-table th.mdl-data-table__header--sorted-ascending, .mdl-data-table th.mdl-data-table__header--sorted-descending {
+ color: rgba(0, 0, 0, 0.87); }
+ .mdl-data-table th.mdl-data-table__header--sorted-ascending:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:before {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ word-wrap: normal;
+ -moz-font-feature-settings: 'liga';
+ font-feature-settings: 'liga';
+ -webkit-font-feature-settings: 'liga';
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+ content: "\e5d8";
+ margin-right: 5px;
+ vertical-align: sub; }
+ .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover {
+ cursor: pointer; }
+ .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover:before {
+ color: rgba(0, 0, 0, 0.26); }
+ .mdl-data-table th.mdl-data-table__header--sorted-descending:before {
+ content: "\e5db"; }
+
+.mdl-data-table__select {
+ width: 16px; }
+
+.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
+ text-align: left; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-dialog {
+ border: none;
+ box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+ width: 280px; }
+ .mdl-dialog__title {
+ padding: 24px 24px 0;
+ margin: 0;
+ font-size: 2.5rem; }
+ .mdl-dialog__actions {
+ padding: 8px 8px 8px 24px;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row-reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+ .mdl-dialog__actions > * {
+ margin-right: 8px;
+ height: 36px; }
+ .mdl-dialog__actions > *:first-child {
+ margin-right: 0; }
+ .mdl-dialog__actions--full-width {
+ padding: 0 0 8px 0; }
+ .mdl-dialog__actions--full-width > * {
+ height: 48px;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ padding-right: 16px;
+ margin-right: 0;
+ text-align: right; }
+ .mdl-dialog__content {
+ padding: 20px 24px 24px 24px;
+ color: rgba(0,0,0, 0.54); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-mega-footer {
+ padding: 16px 40px;
+ color: rgb(158,158,158);
+ background-color: rgb(66,66,66); }
+
+.mdl-mega-footer--top-section:after,
+.mdl-mega-footer--middle-section:after,
+.mdl-mega-footer--bottom-section:after,
+.mdl-mega-footer__top-section:after,
+.mdl-mega-footer__middle-section:after,
+.mdl-mega-footer__bottom-section:after {
+ content: '';
+ display: block;
+ clear: both; }
+
+.mdl-mega-footer--left-section,
+.mdl-mega-footer__left-section {
+ margin-bottom: 16px; }
+
+.mdl-mega-footer--right-section,
+.mdl-mega-footer__right-section {
+ margin-bottom: 16px; }
+
+.mdl-mega-footer--right-section a,
+.mdl-mega-footer__right-section a {
+ display: block;
+ margin-bottom: 16px;
+ color: inherit;
+ text-decoration: none; }
+
+@media screen and (min-width: 760px) {
+ .mdl-mega-footer--left-section,
+ .mdl-mega-footer__left-section {
+ float: left; }
+ .mdl-mega-footer--right-section,
+ .mdl-mega-footer__right-section {
+ float: right; }
+ .mdl-mega-footer--right-section a,
+ .mdl-mega-footer__right-section a {
+ display: inline-block;
+ margin-left: 16px;
+ line-height: 36px;
+ vertical-align: middle; } }
+
+.mdl-mega-footer--social-btn,
+.mdl-mega-footer__social-btn {
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ margin: 0;
+ background-color: rgb(158,158,158);
+ border: none; }
+
+.mdl-mega-footer--drop-down-section,
+.mdl-mega-footer__drop-down-section {
+ display: block;
+ position: relative; }
+
+@media screen and (min-width: 760px) {
+ .mdl-mega-footer--drop-down-section,
+ .mdl-mega-footer__drop-down-section {
+ width: 33%; }
+ .mdl-mega-footer--drop-down-section:nth-child(1),
+ .mdl-mega-footer--drop-down-section:nth-child(2),
+ .mdl-mega-footer__drop-down-section:nth-child(1),
+ .mdl-mega-footer__drop-down-section:nth-child(2) {
+ float: left; }
+ .mdl-mega-footer--drop-down-section:nth-child(3),
+ .mdl-mega-footer__drop-down-section:nth-child(3) {
+ float: right; }
+ .mdl-mega-footer--drop-down-section:nth-child(3):after,
+ .mdl-mega-footer__drop-down-section:nth-child(3):after {
+ clear: right; }
+ .mdl-mega-footer--drop-down-section:nth-child(4),
+ .mdl-mega-footer__drop-down-section:nth-child(4) {
+ clear: right;
+ float: right; }
+ .mdl-mega-footer--middle-section:after,
+ .mdl-mega-footer__middle-section:after {
+ content: '';
+ display: block;
+ clear: both; }
+ .mdl-mega-footer--bottom-section,
+ .mdl-mega-footer__bottom-section {
+ padding-top: 0; } }
+
+@media screen and (min-width: 1024px) {
+ .mdl-mega-footer--drop-down-section,
+ .mdl-mega-footer--drop-down-section:nth-child(3),
+ .mdl-mega-footer--drop-down-section:nth-child(4),
+ .mdl-mega-footer__drop-down-section,
+ .mdl-mega-footer__drop-down-section:nth-child(3),
+ .mdl-mega-footer__drop-down-section:nth-child(4) {
+ width: 24%;
+ float: left; } }
+
+.mdl-mega-footer--heading-checkbox,
+.mdl-mega-footer__heading-checkbox {
+ position: absolute;
+ width: 100%;
+ height: 55.8px;
+ padding: 32px;
+ margin: 0;
+ margin-top: -16px;
+ cursor: pointer;
+ z-index: 1;
+ opacity: 0; }
+ .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after,
+ .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after,
+ .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after,
+ .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after {
+ font-family: 'Material Icons';
+ content: '\E5CE'; }
+
+.mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+.mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+.mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+.mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
+ display: none; }
+
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
+.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
+.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after {
+ font-family: 'Material Icons';
+ content: '\E5CF'; }
+
+.mdl-mega-footer--heading,
+.mdl-mega-footer__heading {
+ position: relative;
+ width: 100%;
+ padding-right: 39.8px;
+ margin-bottom: 16px;
+ box-sizing: border-box;
+ font-size: 14px;
+ line-height: 23.8px;
+ font-weight: 500;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ color: rgb(224,224,224); }
+
+.mdl-mega-footer--heading:after,
+.mdl-mega-footer__heading:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: block;
+ width: 23.8px;
+ height: 23.8px;
+ background-size: cover; }
+
+.mdl-mega-footer--link-list,
+.mdl-mega-footer__link-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ margin-bottom: 32px; }
+ .mdl-mega-footer--link-list:after,
+ .mdl-mega-footer__link-list:after {
+ clear: both;
+ display: block;
+ content: ''; }
+
+.mdl-mega-footer--link-list li,
+.mdl-mega-footer__link-list li {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ line-height: 20px; }
+
+.mdl-mega-footer--link-list a,
+.mdl-mega-footer__link-list a {
+ color: inherit;
+ text-decoration: none;
+ white-space: nowrap; }
+
+@media screen and (min-width: 760px) {
+ .mdl-mega-footer--heading-checkbox,
+ .mdl-mega-footer__heading-checkbox {
+ display: none; }
+ .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after,
+ .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after,
+ .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after,
+ .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after {
+ content: ''; }
+ .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+ .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+ .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+ .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+ .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
+ .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
+ .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+ .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
+ display: block; }
+ .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
+ .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
+ .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
+ .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after {
+ content: ''; } }
+
+.mdl-mega-footer--bottom-section,
+.mdl-mega-footer__bottom-section {
+ padding-top: 16px;
+ margin-bottom: 16px; }
+
+.mdl-logo {
+ margin-bottom: 16px;
+ color: white; }
+
+.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
+.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
+ float: left;
+ margin-bottom: 0;
+ margin-right: 16px; }
+
+@media screen and (min-width: 760px) {
+ .mdl-logo {
+ float: left;
+ margin-bottom: 0;
+ margin-right: 16px; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-mini-footer {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 32px 16px;
+ color: rgb(158,158,158);
+ background-color: rgb(66,66,66); }
+ .mdl-mini-footer:after {
+ content: '';
+ display: block; }
+ .mdl-mini-footer .mdl-logo {
+ line-height: 36px; }
+
+.mdl-mini-footer--link-list,
+.mdl-mini-footer__link-list {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row nowrap;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ list-style: none;
+ margin: 0;
+ padding: 0; }
+ .mdl-mini-footer--link-list li,
+ .mdl-mini-footer__link-list li {
+ margin-bottom: 0;
+ margin-right: 16px; }
+ @media screen and (min-width: 760px) {
+ .mdl-mini-footer--link-list li,
+ .mdl-mini-footer__link-list li {
+ line-height: 36px; } }
+ .mdl-mini-footer--link-list a,
+ .mdl-mini-footer__link-list a {
+ color: inherit;
+ text-decoration: none;
+ white-space: nowrap; }
+
+.mdl-mini-footer--left-section,
+.mdl-mini-footer__left-section {
+ display: inline-block;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0; }
+
+.mdl-mini-footer--right-section,
+.mdl-mini-footer__right-section {
+ display: inline-block;
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1; }
+
+.mdl-mini-footer--social-btn,
+.mdl-mini-footer__social-btn {
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ margin: 0;
+ background-color: rgb(158,158,158);
+ border: none; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-icon-toggle {
+ position: relative;
+ z-index: 1;
+ vertical-align: middle;
+ display: inline-block;
+ height: 32px;
+ margin: 0;
+ padding: 0; }
+
+.mdl-icon-toggle__input {
+ line-height: 32px; }
+ .mdl-icon-toggle.is-upgraded .mdl-icon-toggle__input {
+ position: absolute;
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ -ms-appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: none; }
+
+.mdl-icon-toggle__label {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ height: 32px;
+ width: 32px;
+ min-width: 32px;
+ color: rgb(97,97,97);
+ border-radius: 50%;
+ padding: 0;
+ margin-left: 0;
+ margin-right: 0;
+ text-align: center;
+ background-color: transparent;
+ will-change: background-color;
+ transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+ .mdl-icon-toggle__label.material-icons {
+ line-height: 32px;
+ font-size: 24px; }
+ .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
+ color: rgb(63,81,181); }
+ .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
+ color: rgba(0,0,0, 0.26);
+ cursor: auto;
+ transition: none; }
+ .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
+ background-color: rgba(0,0,0, 0.12); }
+ .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
+ background-color: rgba(63,81,181, 0.26); }
+
+.mdl-icon-toggle__ripple-container {
+ position: absolute;
+ z-index: 2;
+ top: -2px;
+ left: -2px;
+ box-sizing: border-box;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ cursor: pointer;
+ overflow: hidden;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+ .mdl-icon-toggle__ripple-container .mdl-ripple {
+ background: rgb(97,97,97); }
+ .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container {
+ cursor: auto; }
+ .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
+ background: transparent; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-list {
+ display: block;
+ padding: 8px 0;
+ list-style: none; }
+
+.mdl-list__item {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.04em;
+ line-height: 1;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ min-height: 48px;
+ box-sizing: border-box;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 16px;
+ cursor: default;
+ color: rgba(0,0,0, 0.87);
+ overflow: hidden; }
+ .mdl-list__item .mdl-list__item-primary-content {
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ -webkit-flex-grow: 2;
+ -ms-flex-positive: 2;
+ flex-grow: 2;
+ text-decoration: none;
+ box-sizing: border-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+ .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
+ margin-right: 32px; }
+ .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
+ margin-right: 16px; }
+ .mdl-list__item .mdl-list__item-secondary-content {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: column;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ -webkit-align-items: flex-end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+ margin-left: 16px; }
+ .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label {
+ display: inline; }
+ .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: 0;
+ color: rgba(0,0,0, 0.54); }
+ .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header {
+ padding: 0 0 0 16px; }
+
+.mdl-list__item-icon,
+.mdl-list__item-icon.material-icons {
+ height: 24px;
+ width: 24px;
+ font-size: 24px;
+ box-sizing: border-box;
+ color: rgb(117,117,117); }
+
+.mdl-list__item-avatar,
+.mdl-list__item-avatar.material-icons {
+ height: 40px;
+ width: 40px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ background-color: rgb(117,117,117);
+ font-size: 40px;
+ color: white; }
+
+.mdl-list__item--two-line {
+ height: 72px; }
+ .mdl-list__item--two-line .mdl-list__item-primary-content {
+ height: 36px;
+ line-height: 20px;
+ display: block; }
+ .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar {
+ float: left; }
+ .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon {
+ float: left;
+ margin-top: 6px; }
+ .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content {
+ height: 36px; }
+ .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ line-height: 18px;
+ color: rgba(0,0,0, 0.54);
+ display: block;
+ padding: 0; }
+
+.mdl-list__item--three-line {
+ height: 88px; }
+ .mdl-list__item--three-line .mdl-list__item-primary-content {
+ height: 52px;
+ line-height: 20px;
+ display: block; }
+ .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar,
+ .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon {
+ float: left; }
+ .mdl-list__item--three-line .mdl-list__item-secondary-content {
+ height: 52px; }
+ .mdl-list__item--three-line .mdl-list__item-text-body {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ line-height: 18px;
+ height: 52px;
+ color: rgba(0,0,0, 0.54);
+ display: block;
+ padding: 0; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-menu__container {
+ display: block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ position: absolute;
+ overflow: visible;
+ height: 0;
+ width: 0;
+ visibility: hidden;
+ z-index: -1; }
+ .mdl-menu__container.is-visible, .mdl-menu__container.is-animating {
+ z-index: 999;
+ visibility: visible; }
+
+.mdl-menu__outline {
+ display: block;
+ background: rgb(255,255,255);
+ margin: 0;
+ padding: 0;
+ border: none;
+ border-radius: 2px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ opacity: 0;
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ will-change: transform;
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: -1; }
+ .mdl-menu__container.is-visible .mdl-menu__outline {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ z-index: 999; }
+ .mdl-menu__outline.mdl-menu--bottom-right {
+ -webkit-transform-origin: 100% 0;
+ transform-origin: 100% 0; }
+ .mdl-menu__outline.mdl-menu--top-left {
+ -webkit-transform-origin: 0 100%;
+ transform-origin: 0 100%; }
+ .mdl-menu__outline.mdl-menu--top-right {
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%; }
+
+.mdl-menu {
+ position: absolute;
+ list-style: none;
+ top: 0;
+ left: 0;
+ height: auto;
+ width: auto;
+ min-width: 124px;
+ padding: 8px 0;
+ margin: 0;
+ opacity: 0;
+ clip: rect(0 0 0 0);
+ z-index: -1; }
+ .mdl-menu__container.is-visible .mdl-menu {
+ opacity: 1;
+ z-index: 999; }
+ .mdl-menu.is-animating {
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+ .mdl-menu.mdl-menu--bottom-right {
+ left: auto;
+ right: 0; }
+ .mdl-menu.mdl-menu--top-left {
+ top: auto;
+ bottom: 0; }
+ .mdl-menu.mdl-menu--top-right {
+ top: auto;
+ left: auto;
+ bottom: 0;
+ right: 0; }
+ .mdl-menu.mdl-menu--unaligned {
+ top: auto;
+ left: auto; }
+
+.mdl-menu__item {
+ display: block;
+ border: none;
+ color: rgba(0,0,0, 0.87);
+ background-color: transparent;
+ text-align: left;
+ margin: 0;
+ padding: 0 16px;
+ outline-color: rgb(189,189,189);
+ position: relative;
+ overflow: hidden;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ text-decoration: none;
+ cursor: pointer;
+ height: 48px;
+ line-height: 48px;
+ white-space: nowrap;
+ opacity: 0;
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .mdl-menu__container.is-visible .mdl-menu__item {
+ opacity: 1; }
+ .mdl-menu__item::-moz-focus-inner {
+ border: 0; }
+ .mdl-menu__item--full-bleed-divider {
+ border-bottom: 1px solid rgba(0,0,0, 0.12); }
+ .mdl-menu__item[disabled], .mdl-menu__item[data-mdl-disabled] {
+ color: rgb(189,189,189);
+ background-color: transparent;
+ cursor: auto; }
+ .mdl-menu__item[disabled]:hover, .mdl-menu__item[data-mdl-disabled]:hover {
+ background-color: transparent; }
+ .mdl-menu__item[disabled]:focus, .mdl-menu__item[data-mdl-disabled]:focus {
+ background-color: transparent; }
+ .mdl-menu__item[disabled] .mdl-ripple, .mdl-menu__item[data-mdl-disabled] .mdl-ripple {
+ background: transparent; }
+ .mdl-menu__item:hover {
+ background-color: rgb(238,238,238); }
+ .mdl-menu__item:focus {
+ outline: none;
+ background-color: rgb(238,238,238); }
+ .mdl-menu__item:active {
+ background-color: rgb(224,224,224); }
+
+.mdl-menu__item--ripple-container {
+ display: block;
+ height: 100%;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ z-index: 0;
+ overflow: hidden; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-progress {
+ display: block;
+ position: relative;
+ height: 4px;
+ width: 500px;
+ max-width: 100%; }
+
+.mdl-progress > .bar {
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 0%;
+ transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+
+.mdl-progress > .progressbar {
+ background-color: rgb(63,81,181);
+ z-index: 1;
+ left: 0; }
+
+.mdl-progress > .bufferbar {
+ background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181));
+ z-index: 0;
+ left: 0; }
+
+.mdl-progress > .auxbar {
+ right: 0; }
+
+@supports (-webkit-appearance: none) {
+ .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
+ .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
+ background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181));
+ -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
+ mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo="); } }
+
+.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
+.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
+ background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181)); }
+
+.mdl-progress.mdl-progress--indeterminate > .bar1,
+.mdl-progress.mdl-progress__indeterminate > .bar1 {
+ background-color: rgb(63,81,181);
+ -webkit-animation-name: indeterminate1;
+ animation-name: indeterminate1;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear; }
+
+.mdl-progress.mdl-progress--indeterminate > .bar3,
+.mdl-progress.mdl-progress__indeterminate > .bar3 {
+ background-image: none;
+ background-color: rgb(63,81,181);
+ -webkit-animation-name: indeterminate2;
+ animation-name: indeterminate2;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear; }
+
+@-webkit-keyframes indeterminate1 {
+ 0% {
+ left: 0%;
+ width: 0%; }
+ 50% {
+ left: 25%;
+ width: 75%; }
+ 75% {
+ left: 100%;
+ width: 0%; } }
+
+@keyframes indeterminate1 {
+ 0% {
+ left: 0%;
+ width: 0%; }
+ 50% {
+ left: 25%;
+ width: 75%; }
+ 75% {
+ left: 100%;
+ width: 0%; } }
+
+@-webkit-keyframes indeterminate2 {
+ 0% {
+ left: 0%;
+ width: 0%; }
+ 50% {
+ left: 0%;
+ width: 0%; }
+ 75% {
+ left: 0%;
+ width: 25%; }
+ 100% {
+ left: 100%;
+ width: 0%; } }
+
+@keyframes indeterminate2 {
+ 0% {
+ left: 0%;
+ width: 0%; }
+ 50% {
+ left: 0%;
+ width: 0%; }
+ 75% {
+ left: 0%;
+ width: 25%; }
+ 100% {
+ left: 100%;
+ width: 0%; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-navigation {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ box-sizing: border-box; }
+
+.mdl-navigation__link {
+ color: rgb(66,66,66);
+ text-decoration: none;
+ margin: 0;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0;
+ opacity: 0.87; }
+ .mdl-navigation__link .material-icons {
+ vertical-align: middle; }
+
+.mdl-layout {
+ width: 100%;
+ height: 100%;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
+ -webkit-overflow-scrolling: touch; }
+
+.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
+ display: none; }
+
+.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
+ display: none; }
+
+.mdl-layout__container {
+ position: absolute;
+ width: 100%;
+ height: 100%; }
+
+.mdl-layout__title,
+.mdl-layout-title {
+ display: block;
+ position: relative;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: 0.02em;
+ font-weight: 400;
+ box-sizing: border-box; }
+
+.mdl-layout-spacer {
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; }
+
+.mdl-layout__drawer {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ width: 240px;
+ height: 100%;
+ max-height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ box-sizing: border-box;
+ border-right: 1px solid rgb(224,224,224);
+ background: rgb(250,250,250);
+ -webkit-transform: translateX(-250px);
+ transform: translateX(-250px);
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ will-change: transform;
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-property: -webkit-transform;
+ transition-property: transform;
+ transition-property: transform, -webkit-transform;
+ color: rgb(66,66,66);
+ overflow: visible;
+ overflow-y: auto;
+ z-index: 5; }
+ .mdl-layout__drawer.is-visible {
+ -webkit-transform: translateX(0);
+ transform: translateX(0); }
+ .mdl-layout__drawer.is-visible ~ .mdl-layout__content.mdl-layout__content {
+ overflow: hidden; }
+ .mdl-layout__drawer > * {
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0; }
+ .mdl-layout__drawer > .mdl-layout__title,
+ .mdl-layout__drawer > .mdl-layout-title {
+ line-height: 64px;
+ padding-left: 40px; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__drawer > .mdl-layout__title,
+ .mdl-layout__drawer > .mdl-layout-title {
+ line-height: 56px;
+ padding-left: 16px; } }
+ .mdl-layout__drawer .mdl-navigation {
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ padding-top: 16px; }
+ .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+ display: block;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ padding: 16px 40px;
+ margin: 0;
+ color: #757575; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+ padding: 16px 16px; } }
+ .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
+ background-color: rgb(224,224,224); }
+ .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
+ background-color: rgb(224,224,224);
+ color: rgb(0,0,0); }
+ @media screen and (min-width: 1025px) {
+ .mdl-layout--fixed-drawer > .mdl-layout__drawer {
+ -webkit-transform: translateX(0);
+ transform: translateX(0); } }
+
+.mdl-layout__drawer-button {
+ display: block;
+ position: absolute;
+ height: 48px;
+ width: 48px;
+ border: 0;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ overflow: hidden;
+ text-align: center;
+ cursor: pointer;
+ font-size: 26px;
+ line-height: 56px;
+ font-family: Helvetica, Arial, sans-serif;
+ margin: 8px 12px;
+ top: 0;
+ left: 0;
+ color: rgb(255,255,255);
+ z-index: 4; }
+ .mdl-layout__header .mdl-layout__drawer-button {
+ position: absolute;
+ color: rgb(255,255,255);
+ background-color: inherit; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header .mdl-layout__drawer-button {
+ margin: 4px; } }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__drawer-button {
+ margin: 4px;
+ color: rgba(0, 0, 0, 0.5); } }
+ @media screen and (min-width: 1025px) {
+ .mdl-layout__drawer-button {
+ line-height: 54px; }
+ .mdl-layout--no-desktop-drawer-button .mdl-layout__drawer-button,
+ .mdl-layout--fixed-drawer > .mdl-layout__drawer-button,
+ .mdl-layout--no-drawer-button .mdl-layout__drawer-button {
+ display: none; } }
+
+.mdl-layout__header {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ box-sizing: border-box;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: none;
+ min-height: 64px;
+ max-height: 1000px;
+ z-index: 3;
+ background-color: rgb(63,81,181);
+ color: rgb(255,255,255);
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-property: max-height, box-shadow; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header {
+ min-height: 56px; } }
+ .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header {
+ margin-left: 240px;
+ width: calc(100% - 240px); }
+ @media screen and (min-width: 1025px) {
+ .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
+ padding-left: 40px; } }
+ .mdl-layout__header > .mdl-layout-icon {
+ position: absolute;
+ left: 40px;
+ top: 16px;
+ height: 32px;
+ width: 32px;
+ overflow: hidden;
+ z-index: 3;
+ display: block; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header > .mdl-layout-icon {
+ left: 16px;
+ top: 12px; } }
+ .mdl-layout.has-drawer .mdl-layout__header > .mdl-layout-icon {
+ display: none; }
+ .mdl-layout__header.is-compact {
+ max-height: 64px; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header.is-compact {
+ max-height: 56px; } }
+ .mdl-layout__header.is-compact.has-tabs {
+ height: 112px; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header.is-compact.has-tabs {
+ min-height: 104px; } }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header {
+ display: none; }
+ .mdl-layout--fixed-header > .mdl-layout__header {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex; } }
+
+.mdl-layout__header--transparent.mdl-layout__header--transparent {
+ background-color: transparent;
+ box-shadow: none; }
+
+.mdl-layout__header--seamed {
+ box-shadow: none; }
+
+.mdl-layout__header--scroll {
+ box-shadow: none; }
+
+.mdl-layout__header--waterfall {
+ box-shadow: none;
+ overflow: hidden; }
+ .mdl-layout__header--waterfall.is-casting-shadow {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+ .mdl-layout__header--waterfall.mdl-layout__header--waterfall-hide-top {
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end; }
+
+.mdl-layout__header-row {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 64px;
+ margin: 0;
+ padding: 0 40px 0 80px; }
+ .mdl-layout--no-drawer-button .mdl-layout__header-row {
+ padding-left: 40px; }
+ @media screen and (min-width: 1025px) {
+ .mdl-layout--no-desktop-drawer-button .mdl-layout__header-row {
+ padding-left: 40px; } }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header-row {
+ height: 56px;
+ padding: 0 16px 0 72px; }
+ .mdl-layout--no-drawer-button .mdl-layout__header-row {
+ padding-left: 16px; } }
+ .mdl-layout__header-row > * {
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0; }
+ .mdl-layout__header--scroll .mdl-layout__header-row {
+ width: 100%; }
+ .mdl-layout__header-row .mdl-navigation {
+ margin: 0;
+ padding: 0;
+ height: 64px;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header-row .mdl-navigation {
+ height: 56px; } }
+ .mdl-layout__header-row .mdl-navigation__link {
+ display: block;
+ color: rgb(255,255,255);
+ line-height: 64px;
+ padding: 0 24px; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__header-row .mdl-navigation__link {
+ line-height: 56px;
+ padding: 0 16px; } }
+
+.mdl-layout__obfuscator {
+ background-color: transparent;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 4;
+ visibility: hidden;
+ transition-property: background-color;
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+ .mdl-layout__obfuscator.is-visible {
+ background-color: rgba(0, 0, 0, 0.5);
+ visibility: visible; }
+ @supports (pointer-events: auto) {
+ .mdl-layout__obfuscator {
+ background-color: rgba(0, 0, 0, 0.5);
+ opacity: 0;
+ transition-property: opacity;
+ visibility: visible;
+ pointer-events: none; }
+ .mdl-layout__obfuscator.is-visible {
+ pointer-events: auto;
+ opacity: 1; } }
+
+.mdl-layout__content {
+ -ms-flex: 0 1 auto;
+ position: relative;
+ display: inline-block;
+ overflow-y: auto;
+ overflow-x: hidden;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ z-index: 1;
+ -webkit-overflow-scrolling: touch; }
+ .mdl-layout--fixed-drawer > .mdl-layout__content {
+ margin-left: 240px; }
+ .mdl-layout__container.has-scrolling-header .mdl-layout__content {
+ overflow: visible; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout--fixed-drawer > .mdl-layout__content {
+ margin-left: 0; }
+ .mdl-layout__container.has-scrolling-header .mdl-layout__content {
+ overflow-y: auto;
+ overflow-x: hidden; } }
+
+.mdl-layout__tab-bar {
+ height: 96px;
+ margin: 0;
+ width: calc(100% - 112px);
+ padding: 0 0 0 56px;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background-color: rgb(63,81,181);
+ overflow-y: hidden;
+ overflow-x: scroll; }
+ .mdl-layout__tab-bar::-webkit-scrollbar {
+ display: none; }
+ .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
+ padding-left: 16px;
+ width: calc(100% - 32px); }
+ @media screen and (min-width: 1025px) {
+ .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar {
+ padding-left: 16px;
+ width: calc(100% - 32px); } }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__tab-bar {
+ width: calc(100% - 60px);
+ padding: 0 0 0 60px; }
+ .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
+ width: calc(100% - 8px);
+ padding-left: 4px; } }
+ .mdl-layout--fixed-tabs .mdl-layout__tab-bar {
+ padding: 0;
+ overflow: hidden;
+ width: 100%; }
+
+.mdl-layout__tab-bar-container {
+ position: relative;
+ height: 48px;
+ width: 100%;
+ border: none;
+ margin: 0;
+ z-index: 2;
+ -webkit-flex-grow: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ overflow: hidden; }
+ .mdl-layout__container > .mdl-layout__tab-bar-container {
+ position: absolute;
+ top: 0;
+ left: 0; }
+
+.mdl-layout__tab-bar-button {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ height: 48px;
+ width: 56px;
+ z-index: 4;
+ text-align: center;
+ background-color: rgb(63,81,181);
+ color: transparent;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button,
+ .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button {
+ width: 16px; }
+ .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button .material-icons,
+ .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button .material-icons {
+ position: relative;
+ left: -4px; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__tab-bar-button {
+ width: 60px; } }
+ .mdl-layout--fixed-tabs .mdl-layout__tab-bar-button {
+ display: none; }
+ .mdl-layout__tab-bar-button .material-icons {
+ line-height: 48px; }
+ .mdl-layout__tab-bar-button.is-active {
+ color: rgb(255,255,255); }
+
+.mdl-layout__tab-bar-left-button {
+ left: 0; }
+
+.mdl-layout__tab-bar-right-button {
+ right: 0; }
+
+.mdl-layout__tab {
+ margin: 0;
+ border: none;
+ padding: 0 24px 0 24px;
+ float: left;
+ position: relative;
+ display: block;
+ -webkit-flex-grow: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ text-decoration: none;
+ height: 48px;
+ line-height: 48px;
+ text-align: center;
+ font-weight: 500;
+ font-size: 14px;
+ text-transform: uppercase;
+ color: rgba(255,255,255, 0.6);
+ overflow: hidden; }
+ @media screen and (max-width: 1024px) {
+ .mdl-layout__tab {
+ padding: 0 12px 0 12px; } }
+ .mdl-layout--fixed-tabs .mdl-layout__tab {
+ float: none;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ padding: 0; }
+ .mdl-layout.is-upgraded .mdl-layout__tab.is-active {
+ color: rgb(255,255,255); }
+ .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
+ height: 2px;
+ width: 100%;
+ display: block;
+ content: " ";
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background: rgb(255,64,129);
+ -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
+ .mdl-layout__tab .mdl-layout__tab-ripple-container {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ overflow: hidden; }
+ .mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple {
+ background-color: rgb(255,255,255); }
+
+.mdl-layout__tab-panel {
+ display: block; }
+ .mdl-layout.is-upgraded .mdl-layout__tab-panel {
+ display: none; }
+ .mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
+ display: block; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-radio {
+ position: relative;
+ font-size: 16px;
+ line-height: 24px;
+ display: inline-block;
+ vertical-align: middle;
+ box-sizing: border-box;
+ height: 24px;
+ margin: 0;
+ padding-left: 0; }
+ .mdl-radio.is-upgraded {
+ padding-left: 24px; }
+
+.mdl-radio__button {
+ line-height: 24px; }
+ .mdl-radio.is-upgraded .mdl-radio__button {
+ position: absolute;
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ -ms-appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: none; }
+
+.mdl-radio__outer-circle {
+ position: absolute;
+ top: 4px;
+ left: 0;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 16px;
+ height: 16px;
+ margin: 0;
+ cursor: pointer;
+ border: 2px solid rgba(0,0,0, 0.54);
+ border-radius: 50%;
+ z-index: 2; }
+ .mdl-radio.is-checked .mdl-radio__outer-circle {
+ border: 2px solid rgb(63,81,181); }
+ .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
+ .mdl-radio.is-disabled .mdl-radio__outer-circle {
+ border: 2px solid rgba(0,0,0, 0.26);
+ cursor: auto; }
+
+.mdl-radio__inner-circle {
+ position: absolute;
+ z-index: 1;
+ margin: 0;
+ top: 8px;
+ left: 4px;
+ box-sizing: border-box;
+ width: 8px;
+ height: 8px;
+ cursor: pointer;
+ transition-duration: 0.28s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-property: -webkit-transform;
+ transition-property: transform;
+ transition-property: transform, -webkit-transform;
+ -webkit-transform: scale(0, 0);
+ transform: scale(0, 0);
+ border-radius: 50%;
+ background: rgb(63,81,181); }
+ .mdl-radio.is-checked .mdl-radio__inner-circle {
+ -webkit-transform: scale(1, 1);
+ transform: scale(1, 1); }
+ fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
+ .mdl-radio.is-disabled .mdl-radio__inner-circle {
+ background: rgba(0,0,0, 0.26);
+ cursor: auto; }
+ .mdl-radio.is-focused .mdl-radio__inner-circle {
+ box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1); }
+
+.mdl-radio__label {
+ cursor: pointer; }
+ fieldset[disabled] .mdl-radio .mdl-radio__label,
+ .mdl-radio.is-disabled .mdl-radio__label {
+ color: rgba(0,0,0, 0.26);
+ cursor: auto; }
+
+.mdl-radio__ripple-container {
+ position: absolute;
+ z-index: 2;
+ top: -9px;
+ left: -13px;
+ box-sizing: border-box;
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ cursor: pointer;
+ overflow: hidden;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
+ .mdl-radio__ripple-container .mdl-ripple {
+ background: rgb(63,81,181); }
+ fieldset[disabled] .mdl-radio .mdl-radio__ripple-container,
+ .mdl-radio.is-disabled .mdl-radio__ripple-container {
+ cursor: auto; }
+ fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
+ .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
+ background: transparent; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
+ -ms-appearance: none;
+ height: 32px;
+ margin: 0; }
+
+.mdl-slider {
+ width: calc(100% - 40px);
+ margin: 0 20px; }
+ .mdl-slider.is-upgraded {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ height: 2px;
+ background: transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ outline: 0;
+ padding: 0;
+ color: rgb(63,81,181);
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ z-index: 1;
+ cursor: pointer;
+ /**************************** Tracks ****************************/
+ /**************************** Thumbs ****************************/
+ /**************************** 0-value ****************************/
+ /**************************** Disabled ****************************/ }
+ .mdl-slider.is-upgraded::-moz-focus-outer {
+ border: 0; }
+ .mdl-slider.is-upgraded::-ms-tooltip {
+ display: none; }
+ .mdl-slider.is-upgraded::-webkit-slider-runnable-track {
+ background: transparent; }
+ .mdl-slider.is-upgraded::-moz-range-track {
+ background: transparent;
+ border: none; }
+ .mdl-slider.is-upgraded::-ms-track {
+ background: none;
+ color: transparent;
+ height: 2px;
+ width: 100%;
+ border: none; }
+ .mdl-slider.is-upgraded::-ms-fill-lower {
+ padding: 0;
+ background: linear-gradient(to right, transparent, transparent 16px, rgb(63,81,181) 16px, rgb(63,81,181) 0); }
+ .mdl-slider.is-upgraded::-ms-fill-upper {
+ padding: 0;
+ background: linear-gradient(to left, transparent, transparent 16px, rgba(0,0,0, 0.26) 16px, rgba(0,0,0, 0.26) 0); }
+ .mdl-slider.is-upgraded::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 12px;
+ height: 12px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ background: rgb(63,81,181);
+ border: none;
+ transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
+ .mdl-slider.is-upgraded::-moz-range-thumb {
+ -moz-appearance: none;
+ width: 12px;
+ height: 12px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ background-image: none;
+ background: rgb(63,81,181);
+ border: none; }
+ .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); }
+ .mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); }
+ .mdl-slider.is-upgraded:active::-webkit-slider-thumb {
+ background-image: none;
+ background: rgb(63,81,181);
+ -webkit-transform: scale(1.5);
+ transform: scale(1.5); }
+ .mdl-slider.is-upgraded:active::-moz-range-thumb {
+ background-image: none;
+ background: rgb(63,81,181);
+ transform: scale(1.5); }
+ .mdl-slider.is-upgraded::-ms-thumb {
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 50%;
+ background: rgb(63,81,181);
+ transform: scale(0.375);
+ transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
+ .mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb {
+ background: radial-gradient(circle closest-side, rgb(63,81,181) 0%, rgb(63,81,181) 37.5%, rgba(63,81,181, 0.26) 37.5%, rgba(63,81,181, 0.26) 100%);
+ transform: scale(1); }
+ .mdl-slider.is-upgraded:active::-ms-thumb {
+ background: rgb(63,81,181);
+ transform: scale(0.5625); }
+ .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
+ border: 2px solid rgba(0,0,0, 0.26);
+ background: transparent; }
+ .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
+ border: 2px solid rgba(0,0,0, 0.26);
+ background: transparent; }
+ .mdl-slider.is-upgraded.is-lowest-value +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 6px; }
+ .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
+ background: rgba(0,0,0, 0.12); }
+ .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
+ background: rgba(0,0,0, 0.12); }
+ .mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb {
+ border: 1.6px solid rgba(0,0,0, 0.26);
+ -webkit-transform: scale(1.5);
+ transform: scale(1.5); }
+ .mdl-slider.is-upgraded.is-lowest-value:active +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 9px; }
+ .mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb {
+ border: 1.5px solid rgba(0,0,0, 0.26);
+ transform: scale(1.5); }
+ .mdl-slider.is-upgraded.is-lowest-value::-ms-thumb {
+ background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0,0,0, 0.26) 66.67%, rgba(0,0,0, 0.26) 100%); }
+ .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb {
+ background: radial-gradient(circle closest-side, rgba(0,0,0, 0.12) 0%, rgba(0,0,0, 0.12) 25%, rgba(0,0,0, 0.26) 25%, rgba(0,0,0, 0.26) 37.5%, rgba(0,0,0, 0.12) 37.5%, rgba(0,0,0, 0.12) 100%);
+ transform: scale(1); }
+ .mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb {
+ transform: scale(0.5625);
+ background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0,0,0, 0.26) 77.78%, rgba(0,0,0, 0.26) 100%); }
+ .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower {
+ background: transparent; }
+ .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper {
+ margin-left: 6px; }
+ .mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper {
+ margin-left: 9px; }
+ .mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled::-webkit-slider-thumb {
+ -webkit-transform: scale(0.667);
+ transform: scale(0.667);
+ background: rgba(0,0,0, 0.26); }
+ .mdl-slider.is-upgraded:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded:disabled::-moz-range-thumb {
+ transform: scale(0.667);
+ background: rgba(0,0,0, 0.26); }
+ .mdl-slider.is-upgraded:disabled +
+.mdl-slider__background-flex > .mdl-slider__background-lower {
+ background-color: rgba(0,0,0, 0.26);
+ left: -6px; }
+ .mdl-slider.is-upgraded:disabled +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 6px; }
+ .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb {
+ border: 3px solid rgba(0,0,0, 0.26);
+ background: transparent;
+ -webkit-transform: scale(0.667);
+ transform: scale(0.667); }
+ .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb {
+ border: 3px solid rgba(0,0,0, 0.26);
+ background: transparent;
+ transform: scale(0.667); }
+ .mdl-slider.is-upgraded.is-lowest-value:disabled:active +
+.mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 6px; }
+ .mdl-slider.is-upgraded:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled::-ms-thumb {
+ transform: scale(0.25);
+ background: rgba(0,0,0, 0.26); }
+ .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb {
+ transform: scale(0.25);
+ background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0,0,0, 0.26) 50%, rgba(0,0,0, 0.26) 100%); }
+ .mdl-slider.is-upgraded:disabled::-ms-fill-lower {
+ margin-right: 6px;
+ background: linear-gradient(to right, transparent, transparent 25px, rgba(0,0,0, 0.26) 25px, rgba(0,0,0, 0.26) 0); }
+ .mdl-slider.is-upgraded:disabled::-ms-fill-upper {
+ margin-left: 6px; }
+ .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper {
+ margin-left: 6px; }
+
+.mdl-slider__ie-container {
+ height: 18px;
+ overflow: visible;
+ border: none;
+ margin: none;
+ padding: none; }
+
+.mdl-slider__container {
+ height: 18px;
+ position: relative;
+ background: none;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row; }
+
+.mdl-slider__background-flex {
+ background: transparent;
+ position: absolute;
+ height: 2px;
+ width: calc(100% - 52px);
+ top: 50%;
+ left: 0;
+ margin: 0 26px;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ overflow: hidden;
+ border: 0;
+ padding: 0;
+ -webkit-transform: translate(0, -1px);
+ transform: translate(0, -1px); }
+
+.mdl-slider__background-lower {
+ background: rgb(63,81,181);
+ -webkit-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+ position: relative;
+ border: 0;
+ padding: 0; }
+
+.mdl-slider__background-upper {
+ background: rgba(0,0,0, 0.26);
+ -webkit-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+ position: relative;
+ border: 0;
+ padding: 0;
+ transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-snackbar {
+ position: fixed;
+ bottom: 0;
+ left: 50%;
+ cursor: default;
+ background-color: #323232;
+ z-index: 3;
+ display: block;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ will-change: transform;
+ -webkit-transform: translate(0, 80px);
+ transform: translate(0, 80px);
+ transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+ transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+ transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+ pointer-events: none; }
+ @media (max-width: 479px) {
+ .mdl-snackbar {
+ width: 100%;
+ left: 0;
+ min-height: 48px;
+ max-height: 80px; } }
+ @media (min-width: 480px) {
+ .mdl-snackbar {
+ min-width: 288px;
+ max-width: 568px;
+ border-radius: 2px;
+ -webkit-transform: translate(-50%, 80px);
+ transform: translate(-50%, 80px); } }
+ .mdl-snackbar--active {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+ pointer-events: auto;
+ transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
+ transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
+ transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1); }
+ @media (min-width: 480px) {
+ .mdl-snackbar--active {
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0); } }
+ .mdl-snackbar__text {
+ padding: 14px 12px 14px 24px;
+ vertical-align: middle;
+ color: white;
+ float: left; }
+ .mdl-snackbar__action {
+ background: transparent;
+ border: none;
+ color: rgb(255,64,129);
+ float: right;
+ text-transform: uppercase;
+ padding: 14px 24px 14px 12px;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ text-transform: uppercase;
+ line-height: 1;
+ letter-spacing: 0;
+ overflow: hidden;
+ outline: none;
+ opacity: 0;
+ pointer-events: none;
+ cursor: pointer;
+ text-decoration: none;
+ text-align: center;
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center; }
+ .mdl-snackbar__action::-moz-focus-inner {
+ border: 0; }
+ .mdl-snackbar__action:not([aria-hidden]) {
+ opacity: 1;
+ pointer-events: auto; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-spinner {
+ display: inline-block;
+ position: relative;
+ width: 28px;
+ height: 28px; }
+ .mdl-spinner:not(.is-upgraded).is-active:after {
+ content: "Loading..."; }
+ .mdl-spinner.is-upgraded.is-active {
+ -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
+ animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; }
+
+@-webkit-keyframes mdl-spinner__container-rotate {
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg); } }
+
+@keyframes mdl-spinner__container-rotate {
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg); } }
+
+.mdl-spinner__layer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0; }
+
+.mdl-spinner__layer-1 {
+ border-color: rgb(66,165,245); }
+ .mdl-spinner--single-color .mdl-spinner__layer-1 {
+ border-color: rgb(63,81,181); }
+ .mdl-spinner.is-active .mdl-spinner__layer-1 {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+.mdl-spinner__layer-2 {
+ border-color: rgb(244,67,54); }
+ .mdl-spinner--single-color .mdl-spinner__layer-2 {
+ border-color: rgb(63,81,181); }
+ .mdl-spinner.is-active .mdl-spinner__layer-2 {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+.mdl-spinner__layer-3 {
+ border-color: rgb(253,216,53); }
+ .mdl-spinner--single-color .mdl-spinner__layer-3 {
+ border-color: rgb(63,81,181); }
+ .mdl-spinner.is-active .mdl-spinner__layer-3 {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+.mdl-spinner__layer-4 {
+ border-color: rgb(76,175,80); }
+ .mdl-spinner--single-color .mdl-spinner__layer-4 {
+ border-color: rgb(63,81,181); }
+ .mdl-spinner.is-active .mdl-spinner__layer-4 {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
+ 12.5% {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg); }
+ 25% {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg); }
+ 37.5% {
+ -webkit-transform: rotate(405deg);
+ transform: rotate(405deg); }
+ 50% {
+ -webkit-transform: rotate(540deg);
+ transform: rotate(540deg); }
+ 62.5% {
+ -webkit-transform: rotate(675deg);
+ transform: rotate(675deg); }
+ 75% {
+ -webkit-transform: rotate(810deg);
+ transform: rotate(810deg); }
+ 87.5% {
+ -webkit-transform: rotate(945deg);
+ transform: rotate(945deg); }
+ to {
+ -webkit-transform: rotate(1080deg);
+ transform: rotate(1080deg); } }
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+ 12.5% {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg); }
+ 25% {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg); }
+ 37.5% {
+ -webkit-transform: rotate(405deg);
+ transform: rotate(405deg); }
+ 50% {
+ -webkit-transform: rotate(540deg);
+ transform: rotate(540deg); }
+ 62.5% {
+ -webkit-transform: rotate(675deg);
+ transform: rotate(675deg); }
+ 75% {
+ -webkit-transform: rotate(810deg);
+ transform: rotate(810deg); }
+ 87.5% {
+ -webkit-transform: rotate(945deg);
+ transform: rotate(945deg); }
+ to {
+ -webkit-transform: rotate(1080deg);
+ transform: rotate(1080deg); } }
+
+/**
+* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
+* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
+* to do proper subpixel rendering for the elements being animated. This is
+* especially visible in Chrome 39 on Ubuntu 14.04. See:
+*
+* - https://github.com/Polymer/paper-spinner/issues/9
+* - https://code.google.com/p/chromium/issues/detail?id=436255
+*/
+@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
+ from {
+ opacity: 0.99; }
+ 25% {
+ opacity: 0.99; }
+ 26% {
+ opacity: 0; }
+ 89% {
+ opacity: 0; }
+ 90% {
+ opacity: 0.99; }
+ 100% {
+ opacity: 0.99; } }
+@keyframes mdl-spinner__layer-1-fade-in-out {
+ from {
+ opacity: 0.99; }
+ 25% {
+ opacity: 0.99; }
+ 26% {
+ opacity: 0; }
+ 89% {
+ opacity: 0; }
+ 90% {
+ opacity: 0.99; }
+ 100% {
+ opacity: 0.99; } }
+
+@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
+ from {
+ opacity: 0; }
+ 15% {
+ opacity: 0; }
+ 25% {
+ opacity: 0.99; }
+ 50% {
+ opacity: 0.99; }
+ 51% {
+ opacity: 0; } }
+
+@keyframes mdl-spinner__layer-2-fade-in-out {
+ from {
+ opacity: 0; }
+ 15% {
+ opacity: 0; }
+ 25% {
+ opacity: 0.99; }
+ 50% {
+ opacity: 0.99; }
+ 51% {
+ opacity: 0; } }
+
+@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
+ from {
+ opacity: 0; }
+ 40% {
+ opacity: 0; }
+ 50% {
+ opacity: 0.99; }
+ 75% {
+ opacity: 0.99; }
+ 76% {
+ opacity: 0; } }
+
+@keyframes mdl-spinner__layer-3-fade-in-out {
+ from {
+ opacity: 0; }
+ 40% {
+ opacity: 0; }
+ 50% {
+ opacity: 0.99; }
+ 75% {
+ opacity: 0.99; }
+ 76% {
+ opacity: 0; } }
+
+@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
+ from {
+ opacity: 0; }
+ 65% {
+ opacity: 0; }
+ 75% {
+ opacity: 0.99; }
+ 90% {
+ opacity: 0.99; }
+ 100% {
+ opacity: 0; } }
+
+@keyframes mdl-spinner__layer-4-fade-in-out {
+ from {
+ opacity: 0; }
+ 65% {
+ opacity: 0; }
+ 75% {
+ opacity: 0.99; }
+ 90% {
+ opacity: 0.99; }
+ 100% {
+ opacity: 0; } }
+
+/**
+* Patch the gap that appear between the two adjacent
+* div.mdl-spinner__circle-clipper while the spinner is rotating
+* (appears on Chrome 38, Safari 7.1, and IE 11).
+*
+* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
+* opacity is 0.99, but still does on Safari and IE.
+*/
+.mdl-spinner__gap-patch {
+ position: absolute;
+ box-sizing: border-box;
+ top: 0;
+ left: 45%;
+ width: 10%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit; }
+ .mdl-spinner__gap-patch .mdl-spinner__circle {
+ width: 1000%;
+ left: -450%; }
+
+.mdl-spinner__circle-clipper {
+ display: inline-block;
+ position: relative;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit; }
+ .mdl-spinner__circle-clipper.mdl-spinner__left {
+ float: left; }
+ .mdl-spinner__circle-clipper.mdl-spinner__right {
+ float: right; }
+ .mdl-spinner__circle-clipper .mdl-spinner__circle {
+ width: 200%; }
+
+.mdl-spinner__circle {
+ box-sizing: border-box;
+ height: 100%;
+ border-width: 3px;
+ border-style: solid;
+ border-color: inherit;
+ border-bottom-color: transparent !important;
+ border-radius: 50%;
+ -webkit-animation: none;
+ animation: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0; }
+ .mdl-spinner__left .mdl-spinner__circle {
+ border-right-color: transparent !important;
+ -webkit-transform: rotate(129deg);
+ transform: rotate(129deg); }
+ .mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
+ -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+ .mdl-spinner__right .mdl-spinner__circle {
+ left: -100%;
+ border-left-color: transparent !important;
+ -webkit-transform: rotate(-129deg);
+ transform: rotate(-129deg); }
+ .mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
+ -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
+
+@-webkit-keyframes mdl-spinner__left-spin {
+ from {
+ -webkit-transform: rotate(130deg);
+ transform: rotate(130deg); }
+ 50% {
+ -webkit-transform: rotate(-5deg);
+ transform: rotate(-5deg); }
+ to {
+ -webkit-transform: rotate(130deg);
+ transform: rotate(130deg); } }
+
+@keyframes mdl-spinner__left-spin {
+ from {
+ -webkit-transform: rotate(130deg);
+ transform: rotate(130deg); }
+ 50% {
+ -webkit-transform: rotate(-5deg);
+ transform: rotate(-5deg); }
+ to {
+ -webkit-transform: rotate(130deg);
+ transform: rotate(130deg); } }
+
+@-webkit-keyframes mdl-spinner__right-spin {
+ from {
+ -webkit-transform: rotate(-130deg);
+ transform: rotate(-130deg); }
+ 50% {
+ -webkit-transform: rotate(5deg);
+ transform: rotate(5deg); }
+ to {
+ -webkit-transform: rotate(-130deg);
+ transform: rotate(-130deg); } }
+
+@keyframes mdl-spinner__right-spin {
+ from {
+ -webkit-transform: rotate(-130deg);
+ transform: rotate(-130deg); }
+ 50% {
+ -webkit-transform: rotate(5deg);
+ transform: rotate(5deg); }
+ to {
+ -webkit-transform: rotate(-130deg);
+ transform: rotate(-130deg); } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-switch {
+ position: relative;
+ z-index: 1;
+ vertical-align: middle;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 100%;
+ height: 24px;
+ margin: 0;
+ padding: 0;
+ overflow: visible;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .mdl-switch.is-upgraded {
+ padding-left: 28px; }
+
+.mdl-switch__input {
+ line-height: 24px; }
+ .mdl-switch.is-upgraded .mdl-switch__input {
+ position: absolute;
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ -ms-appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: none; }
+
+.mdl-switch__track {
+ background: rgba(0,0,0, 0.26);
+ position: absolute;
+ left: 0;
+ top: 5px;
+ height: 14px;
+ width: 36px;
+ border-radius: 14px;
+ cursor: pointer; }
+ .mdl-switch.is-checked .mdl-switch__track {
+ background: rgba(63,81,181, 0.5); }
+ .mdl-switch__track fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__track {
+ background: rgba(0,0,0, 0.12);
+ cursor: auto; }
+
+.mdl-switch__thumb {
+ background: rgb(250,250,250);
+ position: absolute;
+ left: 0;
+ top: 2px;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ cursor: pointer;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ transition-duration: 0.28s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-property: left; }
+ .mdl-switch.is-checked .mdl-switch__thumb {
+ background: rgb(63,81,181);
+ left: 16px;
+ box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
+ .mdl-switch__thumb fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__thumb {
+ background: rgb(189,189,189);
+ cursor: auto; }
+
+.mdl-switch__focus-helper {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-4px, -4px);
+ transform: translate(-4px, -4px);
+ display: inline-block;
+ box-sizing: border-box;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: transparent; }
+ .mdl-switch.is-focused .mdl-switch__focus-helper {
+ box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.1); }
+ .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
+ box-shadow: 0 0 0px 20px rgba(63,81,181, 0.26);
+ background-color: rgba(63,81,181, 0.26); }
+
+.mdl-switch__label {
+ position: relative;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 24px;
+ margin: 0;
+ left: 24px; }
+ .mdl-switch__label fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__label {
+ color: rgb(189,189,189);
+ cursor: auto; }
+
+.mdl-switch__ripple-container {
+ position: absolute;
+ z-index: 2;
+ top: -12px;
+ left: -14px;
+ box-sizing: border-box;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ cursor: pointer;
+ overflow: hidden;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+ transition-duration: 0.40s;
+ transition-timing-function: step-end;
+ transition-property: left; }
+ .mdl-switch__ripple-container .mdl-ripple {
+ background: rgb(63,81,181); }
+ .mdl-switch__ripple-container fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__ripple-container {
+ cursor: auto; }
+ fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
+ .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
+ background: transparent; }
+ .mdl-switch.is-checked .mdl-switch__ripple-container {
+ left: 2px; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-tabs {
+ display: block;
+ width: 100%; }
+
+.mdl-tabs__tab-bar {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-content: space-between;
+ -ms-flex-line-pack: justify;
+ align-content: space-between;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ height: 48px;
+ padding: 0 0 0 0;
+ margin: 0;
+ border-bottom: 1px solid rgb(224,224,224); }
+
+.mdl-tabs__tab {
+ margin: 0;
+ border: none;
+ padding: 0 24px 0 24px;
+ float: left;
+ position: relative;
+ display: block;
+ text-decoration: none;
+ height: 48px;
+ line-height: 48px;
+ text-align: center;
+ font-weight: 500;
+ font-size: 14px;
+ text-transform: uppercase;
+ color: rgba(0,0,0, 0.54);
+ overflow: hidden; }
+ .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
+ color: rgba(0,0,0, 0.87); }
+ .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
+ height: 2px;
+ width: 100%;
+ display: block;
+ content: " ";
+ bottom: 0px;
+ left: 0px;
+ position: absolute;
+ background: rgb(63,81,181);
+ -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
+ .mdl-tabs__tab .mdl-tabs__ripple-container {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0px;
+ top: 0px;
+ z-index: 1;
+ overflow: hidden; }
+ .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
+ background: rgb(63,81,181); }
+
+.mdl-tabs__panel {
+ display: block; }
+ .mdl-tabs.is-upgraded .mdl-tabs__panel {
+ display: none; }
+ .mdl-tabs.is-upgraded .mdl-tabs__panel.is-active {
+ display: block; }
+
+@-webkit-keyframes border-expand {
+ 0% {
+ opacity: 0;
+ width: 0; }
+ 100% {
+ opacity: 1;
+ width: 100%; } }
+
+@keyframes border-expand {
+ 0% {
+ opacity: 0;
+ width: 0; }
+ 100% {
+ opacity: 1;
+ width: 100%; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-textfield {
+ position: relative;
+ font-size: 16px;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+ padding: 20px 0; }
+ .mdl-textfield .mdl-button {
+ position: absolute;
+ bottom: 20px; }
+
+.mdl-textfield--align-right {
+ text-align: right; }
+
+.mdl-textfield--full-width {
+ width: 100%; }
+
+.mdl-textfield--expandable {
+ min-width: 32px;
+ width: auto;
+ min-height: 32px; }
+ .mdl-textfield--expandable .mdl-button--icon {
+ top: 16px; }
+
+.mdl-textfield__input {
+ border: none;
+ border-bottom: 1px solid rgba(0,0,0, 0.12);
+ display: block;
+ font-size: 16px;
+ font-family: "Helvetica", "Arial", sans-serif;
+ margin: 0;
+ padding: 4px 0;
+ width: 100%;
+ background: none;
+ text-align: left;
+ color: inherit; }
+ .mdl-textfield__input[type="number"] {
+ -moz-appearance: textfield; }
+ .mdl-textfield__input[type="number"]::-webkit-inner-spin-button, .mdl-textfield__input[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0; }
+ .mdl-textfield.is-focused .mdl-textfield__input {
+ outline: none; }
+ .mdl-textfield.is-invalid .mdl-textfield__input {
+ border-color: rgb(213,0,0);
+ box-shadow: none; }
+ fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+ .mdl-textfield.is-disabled .mdl-textfield__input {
+ background-color: transparent;
+ border-bottom: 1px dotted rgba(0,0,0, 0.12);
+ color: rgba(0,0,0, 0.26); }
+
+.mdl-textfield textarea.mdl-textfield__input {
+ display: block; }
+
+.mdl-textfield__label {
+ bottom: 0;
+ color: rgba(0,0,0, 0.26);
+ font-size: 16px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ top: 24px;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left; }
+ .mdl-textfield.is-dirty .mdl-textfield__label,
+ .mdl-textfield.has-placeholder .mdl-textfield__label {
+ visibility: hidden; }
+ .mdl-textfield--floating-label .mdl-textfield__label {
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+ .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
+ transition: none; }
+ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+ .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
+ color: rgba(0,0,0, 0.26); }
+ .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
+ .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
+ .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
+ color: rgb(63,81,181);
+ font-size: 12px;
+ top: 4px;
+ visibility: visible; }
+ .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label,
+ .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label,
+ .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder .mdl-textfield__label {
+ top: -16px; }
+ .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
+ color: rgb(213,0,0);
+ font-size: 12px; }
+ .mdl-textfield__label:after {
+ background-color: rgb(63,81,181);
+ bottom: 20px;
+ content: '';
+ height: 2px;
+ left: 45%;
+ position: absolute;
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ visibility: hidden;
+ width: 10px; }
+ .mdl-textfield.is-focused .mdl-textfield__label:after {
+ left: 0;
+ visibility: visible;
+ width: 100%; }
+ .mdl-textfield.is-invalid .mdl-textfield__label:after {
+ background-color: rgb(213,0,0); }
+
+.mdl-textfield__error {
+ color: rgb(213,0,0);
+ position: absolute;
+ font-size: 12px;
+ margin-top: 3px;
+ visibility: hidden;
+ display: block; }
+ .mdl-textfield.is-invalid .mdl-textfield__error {
+ visibility: visible; }
+
+.mdl-textfield__expandable-holder {
+ display: inline-block;
+ position: relative;
+ margin-left: 32px;
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ display: inline-block;
+ max-width: 0.1px; }
+ .mdl-textfield.is-focused .mdl-textfield__expandable-holder, .mdl-textfield.is-dirty .mdl-textfield__expandable-holder {
+ max-width: 600px; }
+ .mdl-textfield__expandable-holder .mdl-textfield__label:after {
+ bottom: 0; }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-tooltip {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ -webkit-transform-origin: top center;
+ transform-origin: top center;
+ z-index: 999;
+ background: rgba(97,97,97, 0.9);
+ border-radius: 2px;
+ color: rgb(255,255,255);
+ display: inline-block;
+ font-size: 10px;
+ font-weight: 500;
+ line-height: 14px;
+ max-width: 170px;
+ position: fixed;
+ top: -500px;
+ left: -500px;
+ padding: 8px;
+ text-align: center; }
+
+.mdl-tooltip.is-active {
+ -webkit-animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+ animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards; }
+
+.mdl-tooltip--large {
+ line-height: 14px;
+ font-size: 14px;
+ padding: 16px; }
+
+@-webkit-keyframes pulse {
+ 0% {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0; }
+ 50% {
+ -webkit-transform: scale(0.99);
+ transform: scale(0.99); }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ visibility: visible; } }
+
+@keyframes pulse {
+ 0% {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0; }
+ 50% {
+ -webkit-transform: scale(0.99);
+ transform: scale(0.99); }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ visibility: visible; } }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Typography */
+/* Shadows */
+/* Animations */
+/* Dialog */
+.mdl-shadow--2dp {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
+
+.mdl-shadow--3dp {
+ box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
+
+.mdl-shadow--4dp {
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--6dp {
+ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--8dp {
+ box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--16dp {
+ box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }
+
+.mdl-shadow--24dp {
+ box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); }
+
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+* NOTE: Some rules here are applied using duplicate selectors.
+* This is on purpose to increase their specificity when applied.
+* For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
+*/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*------------------------------------* $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Typography
+ * -----Colors
+ * -----Textfield
+ * -----Switch
+ * -----Spinner
+ * -----Radio
+ * -----Menu
+ * -----List
+ * -----Layout
+ * -----Icon toggles
+ * -----Footer
+ * -----Column
+ * -----Checkbox
+ * -----Card
+ * -----Button
+ * -----Animation
+ * -----Progress
+ * -----Badge
+ * -----Shadows
+ * -----Grid
+ * -----Data table
+ * -----Dialog
+ * -----Snackbar
+ * -----Tooltip
+ * -----Chip
+ *
+ * Even though all variables have the `!default` directive, most of them
+ * should not be changed as they are dependent one another. This can cause
+ * visual distortions (like alignment issues) that are hard to track down
+ * and fix.
+ */
+/* ========== TYPOGRAPHY ========== */
+/* We're splitting fonts into "preferred" and "performance" in order to optimize
+ page loading. For important text, such as the body, we want it to load
+ immediately and not wait for the web font load, whereas for other sections,
+ such as headers and titles, we're OK with things taking a bit longer to load.
+ We do have some optional classes and parameters in the mixins, in case you
+ definitely want to make sure you're using the preferred font and don't mind
+ the performance hit.
+ We should be able to improve on this once CSS Font Loading L3 becomes more
+ widely available.
+*/
+/* ========== COLORS ========== */
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== Color Palettes ========== */
+/* colors.scss */
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* ========== IMAGES ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* ========== Sliders ========== */
+/* ========== Progress ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
+/* TEXTFIELD */
+/* SWITCH */
+/* SPINNER */
+/* RADIO */
+/* MENU */
+/* LIST */
+/* LAYOUT */
+/* ICON TOGGLE */
+/* FOOTER */
+/*mega-footer*/
+/*mini-footer*/
+/* CHECKBOX */
+/* CARD */
+/* Card dimensions */
+/* Cover image */
+/* BUTTON */
+/**
+ *
+ * Dimensions
+ *
+ */
+/* ANIMATION */
+/* PROGRESS */
+/* BADGE */
+/* SHADOWS */
+/* GRID */
+/* DATA TABLE */
+/* DIALOG */
+/* SNACKBAR */
+/* TOOLTIP */
+/* CHIP */
+.mdl-grid {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ margin: 0 auto 0 auto;
+ -webkit-align-items: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch; }
+ .mdl-grid.mdl-grid--no-spacing {
+ padding: 0; }
+
+.mdl-cell {
+ box-sizing: border-box; }
+
+.mdl-cell--top {
+ -webkit-align-self: flex-start;
+ -ms-flex-item-align: start;
+ align-self: flex-start; }
+
+.mdl-cell--middle {
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center; }
+
+.mdl-cell--bottom {
+ -webkit-align-self: flex-end;
+ -ms-flex-item-align: end;
+ align-self: flex-end; }
+
+.mdl-cell--stretch {
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ -ms-grid-row-align: stretch;
+ align-self: stretch; }
+
+.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
+ margin: 0; }
+
+.mdl-cell--order-1 {
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1; }
+
+.mdl-cell--order-2 {
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2; }
+
+.mdl-cell--order-3 {
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3; }
+
+.mdl-cell--order-4 {
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4; }
+
+.mdl-cell--order-5 {
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5; }
+
+.mdl-cell--order-6 {
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6; }
+
+.mdl-cell--order-7 {
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7; }
+
+.mdl-cell--order-8 {
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8; }
+
+.mdl-cell--order-9 {
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9; }
+
+.mdl-cell--order-10 {
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10; }
+
+.mdl-cell--order-11 {
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11; }
+
+.mdl-cell--order-12 {
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12; }
+
+@media (max-width: 479px) {
+ .mdl-grid {
+ padding: 8px; }
+ .mdl-cell {
+ margin: 8px;
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell {
+ width: 100%; }
+ .mdl-cell--hide-phone {
+ display: none !important; }
+ .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1; }
+ .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2; }
+ .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3; }
+ .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4; }
+ .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5; }
+ .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6; }
+ .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7; }
+ .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8; }
+ .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9; }
+ .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10; }
+ .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11; }
+ .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12; }
+ .mdl-cell--1-col,
+ .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
+ width: calc(25% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
+ .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
+ width: 25%; }
+ .mdl-cell--2-col,
+ .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
+ width: calc(50% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
+ .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
+ width: 50%; }
+ .mdl-cell--3-col,
+ .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
+ width: calc(75% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
+ .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
+ width: 75%; }
+ .mdl-cell--4-col,
+ .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
+ .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
+ width: 100%; }
+ .mdl-cell--5-col,
+ .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
+ .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
+ width: 100%; }
+ .mdl-cell--6-col,
+ .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
+ .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
+ width: 100%; }
+ .mdl-cell--7-col,
+ .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
+ .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
+ width: 100%; }
+ .mdl-cell--8-col,
+ .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
+ .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
+ width: 100%; }
+ .mdl-cell--9-col,
+ .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
+ .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
+ width: 100%; }
+ .mdl-cell--10-col,
+ .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
+ .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
+ width: 100%; }
+ .mdl-cell--11-col,
+ .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
+ .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
+ width: 100%; }
+ .mdl-cell--12-col,
+ .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
+ .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
+ width: 100%; }
+ .mdl-cell--1-offset,
+ .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
+ margin-left: calc(25% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
+ margin-left: 25%; }
+ .mdl-cell--2-offset,
+ .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
+ margin-left: calc(50% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
+ margin-left: 50%; }
+ .mdl-cell--3-offset,
+ .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
+ margin-left: calc(75% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
+ margin-left: 75%; } }
+
+@media (min-width: 480px) and (max-width: 839px) {
+ .mdl-grid {
+ padding: 8px; }
+ .mdl-cell {
+ margin: 8px;
+ width: calc(50% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell {
+ width: 50%; }
+ .mdl-cell--hide-tablet {
+ display: none !important; }
+ .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1; }
+ .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2; }
+ .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3; }
+ .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4; }
+ .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5; }
+ .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6; }
+ .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7; }
+ .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8; }
+ .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9; }
+ .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10; }
+ .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11; }
+ .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12; }
+ .mdl-cell--1-col,
+ .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
+ width: calc(12.5% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
+ .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
+ width: 12.5%; }
+ .mdl-cell--2-col,
+ .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
+ width: calc(25% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
+ .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
+ width: 25%; }
+ .mdl-cell--3-col,
+ .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
+ width: calc(37.5% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
+ .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
+ width: 37.5%; }
+ .mdl-cell--4-col,
+ .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
+ width: calc(50% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
+ .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
+ width: 50%; }
+ .mdl-cell--5-col,
+ .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
+ width: calc(62.5% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
+ .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
+ width: 62.5%; }
+ .mdl-cell--6-col,
+ .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
+ width: calc(75% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
+ .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
+ width: 75%; }
+ .mdl-cell--7-col,
+ .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
+ width: calc(87.5% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
+ .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
+ width: 87.5%; }
+ .mdl-cell--8-col,
+ .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
+ .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
+ width: 100%; }
+ .mdl-cell--9-col,
+ .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
+ .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
+ width: 100%; }
+ .mdl-cell--10-col,
+ .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
+ .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
+ width: 100%; }
+ .mdl-cell--11-col,
+ .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
+ .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
+ width: 100%; }
+ .mdl-cell--12-col,
+ .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
+ .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
+ width: 100%; }
+ .mdl-cell--1-offset,
+ .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
+ margin-left: calc(12.5% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
+ margin-left: 12.5%; }
+ .mdl-cell--2-offset,
+ .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
+ margin-left: calc(25% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
+ margin-left: 25%; }
+ .mdl-cell--3-offset,
+ .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
+ margin-left: calc(37.5% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
+ margin-left: 37.5%; }
+ .mdl-cell--4-offset,
+ .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
+ margin-left: calc(50% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
+ margin-left: 50%; }
+ .mdl-cell--5-offset,
+ .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
+ margin-left: calc(62.5% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
+ margin-left: 62.5%; }
+ .mdl-cell--6-offset,
+ .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
+ margin-left: calc(75% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
+ margin-left: 75%; }
+ .mdl-cell--7-offset,
+ .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
+ margin-left: calc(87.5% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
+ margin-left: 87.5%; } }
+
+@media (min-width: 840px) {
+ .mdl-grid {
+ padding: 8px; }
+ .mdl-cell {
+ margin: 8px;
+ width: calc(33.3333333333% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell {
+ width: 33.3333333333%; }
+ .mdl-cell--hide-desktop {
+ display: none !important; }
+ .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1; }
+ .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2; }
+ .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3; }
+ .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4; }
+ .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5; }
+ .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6; }
+ .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7; }
+ .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8; }
+ .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9; }
+ .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10; }
+ .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11; }
+ .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12; }
+ .mdl-cell--1-col,
+ .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
+ width: calc(8.3333333333% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
+ .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
+ width: 8.3333333333%; }
+ .mdl-cell--2-col,
+ .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
+ width: calc(16.6666666667% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
+ .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
+ width: 16.6666666667%; }
+ .mdl-cell--3-col,
+ .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
+ width: calc(25% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
+ .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
+ width: 25%; }
+ .mdl-cell--4-col,
+ .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
+ width: calc(33.3333333333% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
+ .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
+ width: 33.3333333333%; }
+ .mdl-cell--5-col,
+ .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
+ width: calc(41.6666666667% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
+ .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
+ width: 41.6666666667%; }
+ .mdl-cell--6-col,
+ .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
+ width: calc(50% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
+ .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
+ width: 50%; }
+ .mdl-cell--7-col,
+ .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
+ width: calc(58.3333333333% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
+ .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
+ width: 58.3333333333%; }
+ .mdl-cell--8-col,
+ .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
+ width: calc(66.6666666667% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
+ .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
+ width: 66.6666666667%; }
+ .mdl-cell--9-col,
+ .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
+ width: calc(75% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
+ .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
+ width: 75%; }
+ .mdl-cell--10-col,
+ .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
+ width: calc(83.3333333333% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
+ .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
+ width: 83.3333333333%; }
+ .mdl-cell--11-col,
+ .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
+ width: calc(91.6666666667% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
+ .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
+ width: 91.6666666667%; }
+ .mdl-cell--12-col,
+ .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
+ width: calc(100% - 16px); }
+ .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
+ .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
+ width: 100%; }
+ .mdl-cell--1-offset,
+ .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
+ margin-left: calc(8.3333333333% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
+ margin-left: 8.3333333333%; }
+ .mdl-cell--2-offset,
+ .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
+ margin-left: calc(16.6666666667% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
+ margin-left: 16.6666666667%; }
+ .mdl-cell--3-offset,
+ .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
+ margin-left: calc(25% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
+ margin-left: 25%; }
+ .mdl-cell--4-offset,
+ .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
+ margin-left: calc(33.3333333333% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
+ margin-left: 33.3333333333%; }
+ .mdl-cell--5-offset,
+ .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
+ margin-left: calc(41.6666666667% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
+ margin-left: 41.6666666667%; }
+ .mdl-cell--6-offset,
+ .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
+ margin-left: calc(50% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
+ margin-left: 50%; }
+ .mdl-cell--7-offset,
+ .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
+ margin-left: calc(58.3333333333% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
+ margin-left: 58.3333333333%; }
+ .mdl-cell--8-offset,
+ .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
+ margin-left: calc(66.6666666667% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
+ margin-left: 66.6666666667%; }
+ .mdl-cell--9-offset,
+ .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
+ margin-left: calc(75% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
+ margin-left: 75%; }
+ .mdl-cell--10-offset,
+ .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
+ margin-left: calc(83.3333333333% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
+ margin-left: 83.3333333333%; }
+ .mdl-cell--11-offset,
+ .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
+ margin-left: calc(91.6666666667% + 8px); }
+ .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
+ .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
+ margin-left: 91.6666666667%; } }
diff --git a/cgi-bin/core/packages/GoogleMaterial/material.js b/cgi-bin/core/packages/GoogleMaterial/material.js
new file mode 100644
index 0000000..994825a
--- /dev/null
+++ b/cgi-bin/core/packages/GoogleMaterial/material.js
@@ -0,0 +1,3996 @@
+;(function() {
+"use strict";
+
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * A component handler interface using the revealing module design pattern.
+ * More details on this design pattern here:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @author Jason Mayes.
+ */
+/* exported componentHandler */
+
+// Pre-defining the componentHandler interface, for closure documentation and
+// static verification.
+var componentHandler = {
+ /**
+ * Searches existing DOM for elements of our component type and upgrades them
+ * if they have not already been upgraded.
+ *
+ * @param {string=} optJsClass the programatic name of the element class we
+ * need to create a new instance of.
+ * @param {string=} optCssClass the name of the CSS class elements of this
+ * type will have.
+ */
+ upgradeDom: function(optJsClass, optCssClass) {},
+ /**
+ * Upgrades a specific element rather than all in the DOM.
+ *
+ * @param {!Element} element The element we wish to upgrade.
+ * @param {string=} optJsClass Optional name of the class we want to upgrade
+ * the element to.
+ */
+ upgradeElement: function(element, optJsClass) {},
+ /**
+ * Upgrades a specific list of elements rather than all in the DOM.
+ *
+ * @param {!Element|!Array|!NodeList|!HTMLCollection} elements
+ * The elements we wish to upgrade.
+ */
+ upgradeElements: function(elements) {},
+ /**
+ * Upgrades all registered components found in the current DOM. This is
+ * automatically called on window load.
+ */
+ upgradeAllRegistered: function() {},
+ /**
+ * Allows user to be alerted to any upgrades that are performed for a given
+ * component type
+ *
+ * @param {string} jsClass The class name of the MDL component we wish
+ * to hook into for any upgrades performed.
+ * @param {function(!HTMLElement)} callback The function to call upon an
+ * upgrade. This function should expect 1 parameter - the HTMLElement which
+ * got upgraded.
+ */
+ registerUpgradedCallback: function(jsClass, callback) {},
+ /**
+ * Registers a class for future use and attempts to upgrade existing DOM.
+ *
+ * @param {componentHandler.ComponentConfigPublic} config the registration configuration
+ */
+ register: function(config) {},
+ /**
+ * Downgrade either a given node, an array of nodes, or a NodeList.
+ *
+ * @param {!Node|!Array|!NodeList} nodes
+ */
+ downgradeElements: function(nodes) {}
+};
+
+componentHandler = (function() {
+ 'use strict';
+
+ /** @type {!Array} */
+ var registeredComponents_ = [];
+
+ /** @type {!Array} */
+ var createdComponents_ = [];
+
+ var componentConfigProperty_ = 'mdlComponentConfigInternal_';
+
+ /**
+ * Searches registered components for a class we are interested in using.
+ * Optionally replaces a match with passed object if specified.
+ *
+ * @param {string} name The name of a class we want to use.
+ * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
+ * @return {!Object|boolean}
+ * @private
+ */
+ function findRegisteredClass_(name, optReplace) {
+ for (var i = 0; i < registeredComponents_.length; i++) {
+ if (registeredComponents_[i].className === name) {
+ if (typeof optReplace !== 'undefined') {
+ registeredComponents_[i] = optReplace;
+ }
+ return registeredComponents_[i];
+ }
+ }
+ return false;
+ }
+
+ /**
+ * Returns an array of the classNames of the upgraded classes on the element.
+ *
+ * @param {!Element} element The element to fetch data from.
+ * @return {!Array}
+ * @private
+ */
+ function getUpgradedListOfElement_(element) {
+ var dataUpgraded = element.getAttribute('data-upgraded');
+ // Use `['']` as default value to conform the `,name,name...` style.
+ return dataUpgraded === null ? [''] : dataUpgraded.split(',');
+ }
+
+ /**
+ * Returns true if the given element has already been upgraded for the given
+ * class.
+ *
+ * @param {!Element} element The element we want to check.
+ * @param {string} jsClass The class to check for.
+ * @returns {boolean}
+ * @private
+ */
+ function isElementUpgraded_(element, jsClass) {
+ var upgradedList = getUpgradedListOfElement_(element);
+ return upgradedList.indexOf(jsClass) !== -1;
+ }
+
+ /**
+ * Create an event object.
+ *
+ * @param {string} eventType The type name of the event.
+ * @param {boolean} bubbles Whether the event should bubble up the DOM.
+ * @param {boolean} cancelable Whether the event can be canceled.
+ * @returns {!Event}
+ */
+ function createEvent_(eventType, bubbles, cancelable) {
+ if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
+ return new CustomEvent(eventType, {
+ bubbles: bubbles,
+ cancelable: cancelable
+ });
+ } else {
+ var ev = document.createEvent('Events');
+ ev.initEvent(eventType, bubbles, cancelable);
+ return ev;
+ }
+ }
+
+ /**
+ * Searches existing DOM for elements of our component type and upgrades them
+ * if they have not already been upgraded.
+ *
+ * @param {string=} optJsClass the programatic name of the element class we
+ * need to create a new instance of.
+ * @param {string=} optCssClass the name of the CSS class elements of this
+ * type will have.
+ */
+ function upgradeDomInternal(optJsClass, optCssClass) {
+ if (typeof optJsClass === 'undefined' &&
+ typeof optCssClass === 'undefined') {
+ for (var i = 0; i < registeredComponents_.length; i++) {
+ upgradeDomInternal(registeredComponents_[i].className,
+ registeredComponents_[i].cssClass);
+ }
+ } else {
+ var jsClass = /** @type {string} */ (optJsClass);
+ if (typeof optCssClass === 'undefined') {
+ var registeredClass = findRegisteredClass_(jsClass);
+ if (registeredClass) {
+ optCssClass = registeredClass.cssClass;
+ }
+ }
+
+ var elements = document.querySelectorAll('.' + optCssClass);
+ for (var n = 0; n < elements.length; n++) {
+ upgradeElementInternal(elements[n], jsClass);
+ }
+ }
+ }
+
+ /**
+ * Upgrades a specific element rather than all in the DOM.
+ *
+ * @param {!Element} element The element we wish to upgrade.
+ * @param {string=} optJsClass Optional name of the class we want to upgrade
+ * the element to.
+ */
+ function upgradeElementInternal(element, optJsClass) {
+ // Verify argument type.
+ if (!(typeof element === 'object' && element instanceof Element)) {
+ throw new Error('Invalid argument provided to upgrade MDL element.');
+ }
+ // Allow upgrade to be canceled by canceling emitted event.
+ var upgradingEv = createEvent_('mdl-componentupgrading', true, true);
+ element.dispatchEvent(upgradingEv);
+ if (upgradingEv.defaultPrevented) {
+ return;
+ }
+
+ var upgradedList = getUpgradedListOfElement_(element);
+ var classesToUpgrade = [];
+ // If jsClass is not provided scan the registered components to find the
+ // ones matching the element's CSS classList.
+ if (!optJsClass) {
+ var classList = element.classList;
+ registeredComponents_.forEach(function(component) {
+ // Match CSS & Not to be upgraded & Not upgraded.
+ if (classList.contains(component.cssClass) &&
+ classesToUpgrade.indexOf(component) === -1 &&
+ !isElementUpgraded_(element, component.className)) {
+ classesToUpgrade.push(component);
+ }
+ });
+ } else if (!isElementUpgraded_(element, optJsClass)) {
+ classesToUpgrade.push(findRegisteredClass_(optJsClass));
+ }
+
+ // Upgrade the element for each classes.
+ for (var i = 0, n = classesToUpgrade.length, registeredClass; i < n; i++) {
+ registeredClass = classesToUpgrade[i];
+ if (registeredClass) {
+ // Mark element as upgraded.
+ upgradedList.push(registeredClass.className);
+ element.setAttribute('data-upgraded', upgradedList.join(','));
+ var instance = new registeredClass.classConstructor(element);
+ instance[componentConfigProperty_] = registeredClass;
+ createdComponents_.push(instance);
+ // Call any callbacks the user has registered with this component type.
+ for (var j = 0, m = registeredClass.callbacks.length; j < m; j++) {
+ registeredClass.callbacks[j](element);
+ }
+
+ if (registeredClass.widget) {
+ // Assign per element instance for control over API
+ element[registeredClass.className] = instance;
+ }
+ } else {
+ throw new Error(
+ 'Unable to find a registered component for the given class.');
+ }
+
+ var upgradedEv = createEvent_('mdl-componentupgraded', true, false);
+ element.dispatchEvent(upgradedEv);
+ }
+ }
+
+ /**
+ * Upgrades a specific list of elements rather than all in the DOM.
+ *
+ * @param {!Element|!Array|!NodeList|!HTMLCollection} elements
+ * The elements we wish to upgrade.
+ */
+ function upgradeElementsInternal(elements) {
+ if (!Array.isArray(elements)) {
+ if (elements instanceof Element) {
+ elements = [elements];
+ } else {
+ elements = Array.prototype.slice.call(elements);
+ }
+ }
+ for (var i = 0, n = elements.length, element; i < n; i++) {
+ element = elements[i];
+ if (element instanceof HTMLElement) {
+ upgradeElementInternal(element);
+ if (element.children.length > 0) {
+ upgradeElementsInternal(element.children);
+ }
+ }
+ }
+ }
+
+ /**
+ * Registers a class for future use and attempts to upgrade existing DOM.
+ *
+ * @param {componentHandler.ComponentConfigPublic} config
+ */
+ function registerInternal(config) {
+ // In order to support both Closure-compiled and uncompiled code accessing
+ // this method, we need to allow for both the dot and array syntax for
+ // property access. You'll therefore see the `foo.bar || foo['bar']`
+ // pattern repeated across this method.
+ var widgetMissing = (typeof config.widget === 'undefined' &&
+ typeof config['widget'] === 'undefined');
+ var widget = true;
+
+ if (!widgetMissing) {
+ widget = config.widget || config['widget'];
+ }
+
+ var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
+ classConstructor: config.constructor || config['constructor'],
+ className: config.classAsString || config['classAsString'],
+ cssClass: config.cssClass || config['cssClass'],
+ widget: widget,
+ callbacks: []
+ });
+
+ registeredComponents_.forEach(function(item) {
+ if (item.cssClass === newConfig.cssClass) {
+ throw new Error('The provided cssClass has already been registered: ' + item.cssClass);
+ }
+ if (item.className === newConfig.className) {
+ throw new Error('The provided className has already been registered');
+ }
+ });
+
+ if (config.constructor.prototype
+ .hasOwnProperty(componentConfigProperty_)) {
+ throw new Error(
+ 'MDL component classes must not have ' + componentConfigProperty_ +
+ ' defined as a property.');
+ }
+
+ var found = findRegisteredClass_(config.classAsString, newConfig);
+
+ if (!found) {
+ registeredComponents_.push(newConfig);
+ }
+ }
+
+ /**
+ * Allows user to be alerted to any upgrades that are performed for a given
+ * component type
+ *
+ * @param {string} jsClass The class name of the MDL component we wish
+ * to hook into for any upgrades performed.
+ * @param {function(!HTMLElement)} callback The function to call upon an
+ * upgrade. This function should expect 1 parameter - the HTMLElement which
+ * got upgraded.
+ */
+ function registerUpgradedCallbackInternal(jsClass, callback) {
+ var regClass = findRegisteredClass_(jsClass);
+ if (regClass) {
+ regClass.callbacks.push(callback);
+ }
+ }
+
+ /**
+ * Upgrades all registered components found in the current DOM. This is
+ * automatically called on window load.
+ */
+ function upgradeAllRegisteredInternal() {
+ for (var n = 0; n < registeredComponents_.length; n++) {
+ upgradeDomInternal(registeredComponents_[n].className);
+ }
+ }
+
+ /**
+ * Check the component for the downgrade method.
+ * Execute if found.
+ * Remove component from createdComponents list.
+ *
+ * @param {?componentHandler.Component} component
+ */
+ function deconstructComponentInternal(component) {
+ if (component) {
+ var componentIndex = createdComponents_.indexOf(component);
+ createdComponents_.splice(componentIndex, 1);
+
+ var upgrades = component.element_.getAttribute('data-upgraded').split(',');
+ var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
+ upgrades.splice(componentPlace, 1);
+ component.element_.setAttribute('data-upgraded', upgrades.join(','));
+
+ var ev = createEvent_('mdl-componentdowngraded', true, false);
+ component.element_.dispatchEvent(ev);
+ }
+ }
+
+ /**
+ * Downgrade either a given node, an array of nodes, or a NodeList.
+ *
+ * @param {!Node|!Array|!NodeList} nodes
+ */
+ function downgradeNodesInternal(nodes) {
+ /**
+ * Auxiliary function to downgrade a single node.
+ * @param {!Node} node the node to be downgraded
+ */
+ var downgradeNode = function(node) {
+ createdComponents_.filter(function(item) {
+ return item.element_ === node;
+ }).forEach(deconstructComponentInternal);
+ };
+ if (nodes instanceof Array || nodes instanceof NodeList) {
+ for (var n = 0; n < nodes.length; n++) {
+ downgradeNode(nodes[n]);
+ }
+ } else if (nodes instanceof Node) {
+ downgradeNode(nodes);
+ } else {
+ throw new Error('Invalid argument provided to downgrade MDL nodes.');
+ }
+ }
+
+ // Now return the functions that should be made public with their publicly
+ // facing names...
+ return {
+ upgradeDom: upgradeDomInternal,
+ upgradeElement: upgradeElementInternal,
+ upgradeElements: upgradeElementsInternal,
+ upgradeAllRegistered: upgradeAllRegisteredInternal,
+ registerUpgradedCallback: registerUpgradedCallbackInternal,
+ register: registerInternal,
+ downgradeElements: downgradeNodesInternal
+ };
+})();
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ * constructor: Function,
+ * classAsString: string,
+ * cssClass: string,
+ * widget: (string|boolean|undefined)
+ * }}
+ */
+componentHandler.ComponentConfigPublic; // jshint ignore:line
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ * constructor: !Function,
+ * className: string,
+ * cssClass: string,
+ * widget: (string|boolean),
+ * callbacks: !Array
+ * }}
+ */
+componentHandler.ComponentConfig; // jshint ignore:line
+
+/**
+ * Created component (i.e., upgraded element) type as managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ * element_: !HTMLElement,
+ * className: string,
+ * classAsString: string,
+ * cssClass: string,
+ * widget: string
+ * }}
+ */
+componentHandler.Component; // jshint ignore:line
+
+// Export all symbols, for the benefit of Closure compiler.
+// No effect on uncompiled code.
+componentHandler['upgradeDom'] = componentHandler.upgradeDom;
+componentHandler['upgradeElement'] = componentHandler.upgradeElement;
+componentHandler['upgradeElements'] = componentHandler.upgradeElements;
+componentHandler['upgradeAllRegistered'] =
+ componentHandler.upgradeAllRegistered;
+componentHandler['registerUpgradedCallback'] =
+ componentHandler.registerUpgradedCallback;
+componentHandler['register'] = componentHandler.register;
+componentHandler['downgradeElements'] = componentHandler.downgradeElements;
+window.componentHandler = componentHandler;
+window['componentHandler'] = componentHandler;
+
+window.addEventListener('load', function() {
+ 'use strict';
+
+ /**
+ * Performs a "Cutting the mustard" test. If the browser supports the features
+ * tested, adds a mdl-js class to the element. It then upgrades all MDL
+ * components requiring JavaScript.
+ */
+ if ('classList' in document.createElement('div') &&
+ 'querySelector' in document &&
+ 'addEventListener' in window && Array.prototype.forEach) {
+ document.documentElement.classList.add('mdl-js');
+ componentHandler.upgradeAllRegistered();
+ } else {
+ /**
+ * Dummy function to avoid JS errors.
+ */
+ componentHandler.upgradeElement = function() {};
+ /**
+ * Dummy function to avoid JS errors.
+ */
+ componentHandler.register = function() {};
+ }
+});
+
+// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
+// Adapted from https://gist.github.com/paulirish/1579671 which derived from
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+// requestAnimationFrame polyfill by Erik Möller.
+// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+// MIT license
+if (!Date.now) {
+ /**
+ * Date.now polyfill.
+ * @return {number} the current Date
+ */
+ Date.now = function () {
+ return new Date().getTime();
+ };
+ Date['now'] = Date.now;
+}
+var vendors = [
+ 'webkit',
+ 'moz'
+];
+for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+ var vp = vendors[i];
+ window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
+ window['requestAnimationFrame'] = window.requestAnimationFrame;
+ window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+}
+if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+ var lastTime = 0;
+ /**
+ * requestAnimationFrame polyfill.
+ * @param {!Function} callback the callback function.
+ */
+ window.requestAnimationFrame = function (callback) {
+ var now = Date.now();
+ var nextTime = Math.max(lastTime + 16, now);
+ return setTimeout(function () {
+ callback(lastTime = nextTime);
+ }, nextTime - now);
+ };
+ window.cancelAnimationFrame = clearTimeout;
+ window['requestAnimationFrame'] = window.requestAnimationFrame;
+ window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+}
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Button MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialButton = function MaterialButton(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialButton'] = MaterialButton;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialButton.prototype.Constant_ = {};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialButton.prototype.CssClasses_ = {
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_CONTAINER: 'mdl-button__ripple-container',
+ RIPPLE: 'mdl-ripple'
+};
+/**
+ * Handle blur of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialButton.prototype.blurHandler_ = function (event) {
+ if (event) {
+ this.element_.blur();
+ }
+};
+// Public methods.
+/**
+ * Disable button.
+ *
+ * @public
+ */
+MaterialButton.prototype.disable = function () {
+ this.element_.disabled = true;
+};
+MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
+/**
+ * Enable button.
+ *
+ * @public
+ */
+MaterialButton.prototype.enable = function () {
+ this.element_.disabled = false;
+};
+MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
+/**
+ * Initialize element.
+ */
+MaterialButton.prototype.init = function () {
+ if (this.element_) {
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleElement_ = document.createElement('span');
+ this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(this.rippleElement_);
+ this.boundRippleBlurHandler = this.blurHandler_.bind(this);
+ this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
+ this.element_.appendChild(rippleContainer);
+ }
+ this.boundButtonBlurHandler = this.blurHandler_.bind(this);
+ this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
+ this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialButton,
+ classAsString: 'MaterialButton',
+ cssClass: 'mdl-js-button',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Checkbox MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialCheckbox = function MaterialCheckbox(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialCheckbox'] = MaterialCheckbox;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialCheckbox.prototype.CssClasses_ = {
+ INPUT: 'mdl-checkbox__input',
+ BOX_OUTLINE: 'mdl-checkbox__box-outline',
+ FOCUS_HELPER: 'mdl-checkbox__focus-helper',
+ TICK_OUTLINE: 'mdl-checkbox__tick-outline',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked',
+ IS_UPGRADED: 'is-upgraded'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onChange_ = function (event) {
+ this.updateClasses_();
+};
+/**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onMouseUp_ = function (event) {
+ this.blur_();
+};
+/**
+ * Handle class updates.
+ *
+ * @private
+ */
+MaterialCheckbox.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialCheckbox.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.inputElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the inputs toggle state and update display.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.checkToggleState = function () {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState;
+/**
+ * Check the inputs disabled state and update display.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.checkDisabled = function () {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled;
+/**
+ * Disable checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.disable = function () {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
+/**
+ * Enable checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.enable = function () {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
+/**
+ * Check checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.check = function () {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
+/**
+ * Uncheck checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.uncheck = function () {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
+/**
+ * Initialize element.
+ */
+MaterialCheckbox.prototype.init = function () {
+ if (this.element_) {
+ this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+ var boxOutline = document.createElement('span');
+ boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
+ var tickContainer = document.createElement('span');
+ tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
+ var tickOutline = document.createElement('span');
+ tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
+ boxOutline.appendChild(tickOutline);
+ this.element_.appendChild(tickContainer);
+ this.element_.appendChild(boxOutline);
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ this.rippleContainerElement_ = document.createElement('span');
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ this.rippleContainerElement_.appendChild(ripple);
+ this.element_.appendChild(this.rippleContainerElement_);
+ }
+ this.boundInputOnChange = this.onChange_.bind(this);
+ this.boundInputOnFocus = this.onFocus_.bind(this);
+ this.boundInputOnBlur = this.onBlur_.bind(this);
+ this.boundElementMouseUp = this.onMouseUp_.bind(this);
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+ this.element_.addEventListener('mouseup', this.boundElementMouseUp);
+ this.updateClasses_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialCheckbox,
+ classAsString: 'MaterialCheckbox',
+ cssClass: 'mdl-js-checkbox',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for icon toggle MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialIconToggle = function MaterialIconToggle(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialIconToggle'] = MaterialIconToggle;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialIconToggle.prototype.CssClasses_ = {
+ INPUT: 'mdl-icon-toggle__input',
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onChange_ = function (event) {
+ this.updateClasses_();
+};
+/**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onMouseUp_ = function (event) {
+ this.blur_();
+};
+/**
+ * Handle class updates.
+ *
+ * @private
+ */
+MaterialIconToggle.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialIconToggle.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.inputElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the inputs toggle state and update display.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.checkToggleState = function () {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState;
+/**
+ * Check the inputs disabled state and update display.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.checkDisabled = function () {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled;
+/**
+ * Disable icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.disable = function () {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable;
+/**
+ * Enable icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.enable = function () {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
+/**
+ * Check icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.check = function () {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
+/**
+ * Uncheck icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.uncheck = function () {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck;
+/**
+ * Initialize element.
+ */
+MaterialIconToggle.prototype.init = function () {
+ if (this.element_) {
+ this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+ if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ this.rippleContainerElement_ = document.createElement('span');
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ this.rippleContainerElement_.appendChild(ripple);
+ this.element_.appendChild(this.rippleContainerElement_);
+ }
+ this.boundInputOnChange = this.onChange_.bind(this);
+ this.boundInputOnFocus = this.onFocus_.bind(this);
+ this.boundInputOnBlur = this.onBlur_.bind(this);
+ this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+ this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
+ this.updateClasses_();
+ this.element_.classList.add('is-upgraded');
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialIconToggle,
+ classAsString: 'MaterialIconToggle',
+ cssClass: 'mdl-js-icon-toggle',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for dropdown MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialMenu = function MaterialMenu(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialMenu'] = MaterialMenu;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialMenu.prototype.Constant_ = {
+ // Total duration of the menu animation.
+ TRANSITION_DURATION_SECONDS: 0.3,
+ // The fraction of the total duration we want to use for menu item animations.
+ TRANSITION_DURATION_FRACTION: 0.8,
+ // How long the menu stays open after choosing an option (so the user can see
+ // the ripple).
+ CLOSE_TIMEOUT: 150
+};
+/**
+ * Keycodes, for code readability.
+ *
+ * @enum {number}
+ * @private
+ */
+MaterialMenu.prototype.Keycodes_ = {
+ ENTER: 13,
+ ESCAPE: 27,
+ SPACE: 32,
+ UP_ARROW: 38,
+ DOWN_ARROW: 40
+};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialMenu.prototype.CssClasses_ = {
+ CONTAINER: 'mdl-menu__container',
+ OUTLINE: 'mdl-menu__outline',
+ ITEM: 'mdl-menu__item',
+ ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE: 'mdl-ripple',
+ // Statuses
+ IS_UPGRADED: 'is-upgraded',
+ IS_VISIBLE: 'is-visible',
+ IS_ANIMATING: 'is-animating',
+ // Alignment options
+ BOTTOM_LEFT: 'mdl-menu--bottom-left',
+ // This is the default.
+ BOTTOM_RIGHT: 'mdl-menu--bottom-right',
+ TOP_LEFT: 'mdl-menu--top-left',
+ TOP_RIGHT: 'mdl-menu--top-right',
+ UNALIGNED: 'mdl-menu--unaligned'
+};
+/**
+ * Initialize element.
+ */
+MaterialMenu.prototype.init = function () {
+ if (this.element_) {
+ // Create container for the menu.
+ var container = document.createElement('div');
+ container.classList.add(this.CssClasses_.CONTAINER);
+ this.element_.parentElement.insertBefore(container, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ container.appendChild(this.element_);
+ this.container_ = container;
+ // Create outline for the menu (shadow and background).
+ var outline = document.createElement('div');
+ outline.classList.add(this.CssClasses_.OUTLINE);
+ this.outline_ = outline;
+ container.insertBefore(outline, this.element_);
+ // Find the "for" element and bind events to it.
+ var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
+ var forEl = null;
+ if (forElId) {
+ forEl = document.getElementById(forElId);
+ if (forEl) {
+ this.forElement_ = forEl;
+ forEl.addEventListener('click', this.handleForClick_.bind(this));
+ forEl.addEventListener('keydown', this.handleForKeyboardEvent_.bind(this));
+ }
+ }
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+ this.boundItemKeydown_ = this.handleItemKeyboardEvent_.bind(this);
+ this.boundItemClick_ = this.handleItemClick_.bind(this);
+ for (var i = 0; i < items.length; i++) {
+ // Add a listener to each menu item.
+ items[i].addEventListener('click', this.boundItemClick_);
+ // Add a tab index to each menu item.
+ items[i].tabIndex = '-1';
+ // Add a keyboard listener to each menu item.
+ items[i].addEventListener('keydown', this.boundItemKeydown_);
+ }
+ // Add ripple classes to each item, if the user has enabled ripples.
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ for (i = 0; i < items.length; i++) {
+ var item = items[i];
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(ripple);
+ item.appendChild(rippleContainer);
+ item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ }
+ }
+ // Copy alignment classes to the container, so the outline can use them.
+ if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
+ this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
+ }
+ if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+ this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
+ }
+ if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+ this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
+ }
+ if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
+ }
+ if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+ this.outline_.classList.add(this.CssClasses_.UNALIGNED);
+ }
+ container.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+/**
+ * Handles a click on the "for" element, by positioning the menu and then
+ * toggling it.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+MaterialMenu.prototype.handleForClick_ = function (evt) {
+ if (this.element_ && this.forElement_) {
+ var rect = this.forElement_.getBoundingClientRect();
+ var forRect = this.forElement_.parentElement.getBoundingClientRect();
+ if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+ } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+ // Position below the "for" element, aligned to its right.
+ this.container_.style.right = forRect.right - rect.right + 'px';
+ this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+ // Position above the "for" element, aligned to its left.
+ this.container_.style.left = this.forElement_.offsetLeft + 'px';
+ this.container_.style.bottom = forRect.bottom - rect.top + 'px';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ // Position above the "for" element, aligned to its right.
+ this.container_.style.right = forRect.right - rect.right + 'px';
+ this.container_.style.bottom = forRect.bottom - rect.top + 'px';
+ } else {
+ // Default: position below the "for" element, aligned to its left.
+ this.container_.style.left = this.forElement_.offsetLeft + 'px';
+ this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+ }
+ }
+ this.toggle(evt);
+};
+/**
+ * Handles a keyboard event on the "for" element.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+MaterialMenu.prototype.handleForKeyboardEvent_ = function (evt) {
+ if (this.element_ && this.container_ && this.forElement_) {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
+ if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+ if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+ evt.preventDefault();
+ items[items.length - 1].focus();
+ } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+ evt.preventDefault();
+ items[0].focus();
+ }
+ }
+ }
+};
+/**
+ * Handles a keyboard event on an item.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+MaterialMenu.prototype.handleItemKeyboardEvent_ = function (evt) {
+ if (this.element_ && this.container_) {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
+ if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+ var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+ if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+ evt.preventDefault();
+ if (currentIndex > 0) {
+ items[currentIndex - 1].focus();
+ } else {
+ items[items.length - 1].focus();
+ }
+ } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+ evt.preventDefault();
+ if (items.length > currentIndex + 1) {
+ items[currentIndex + 1].focus();
+ } else {
+ items[0].focus();
+ }
+ } else if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+ evt.preventDefault();
+ // Send mousedown and mouseup to trigger ripple.
+ var e = new MouseEvent('mousedown');
+ evt.target.dispatchEvent(e);
+ e = new MouseEvent('mouseup');
+ evt.target.dispatchEvent(e);
+ // Send click.
+ evt.target.click();
+ } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
+ evt.preventDefault();
+ this.hide();
+ }
+ }
+ }
+};
+/**
+ * Handles a click event on an item.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+MaterialMenu.prototype.handleItemClick_ = function (evt) {
+ if (evt.target.hasAttribute('disabled')) {
+ evt.stopPropagation();
+ } else {
+ // Wait some time before closing menu, so the user can see the ripple.
+ this.closing_ = true;
+ window.setTimeout(function (evt) {
+ this.hide();
+ this.closing_ = false;
+ }.bind(this), this.Constant_.CLOSE_TIMEOUT);
+ }
+};
+/**
+ * Calculates the initial clip (for opening the menu) or final clip (for closing
+ * it), and applies it. This allows us to animate from or to the correct point,
+ * that is, the point it's aligned to in the "for" element.
+ *
+ * @param {number} height Height of the clip rectangle
+ * @param {number} width Width of the clip rectangle
+ * @private
+ */
+MaterialMenu.prototype.applyClip_ = function (height, width) {
+ if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+ // Do not clip.
+ this.element_.style.clip = '';
+ } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+ // Clip to the top right corner of the menu.
+ this.element_.style.clip = 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+ // Clip to the bottom left corner of the menu.
+ this.element_.style.clip = 'rect(' + height + 'px 0 ' + height + 'px 0)';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ // Clip to the bottom right corner of the menu.
+ this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)';
+ } else {
+ // Default: do not clip (same as clipping to the top left corner).
+ this.element_.style.clip = '';
+ }
+};
+/**
+ * Cleanup function to remove animation listeners.
+ *
+ * @param {Event} evt
+ * @private
+ */
+MaterialMenu.prototype.removeAnimationEndListener_ = function (evt) {
+ evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
+};
+/**
+ * Adds an event listener to clean up after the animation ends.
+ *
+ * @private
+ */
+MaterialMenu.prototype.addAnimationEndListener_ = function () {
+ this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
+ this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
+};
+/**
+ * Displays the menu.
+ *
+ * @public
+ */
+MaterialMenu.prototype.show = function (evt) {
+ if (this.element_ && this.container_ && this.outline_) {
+ // Measure the inner element.
+ var height = this.element_.getBoundingClientRect().height;
+ var width = this.element_.getBoundingClientRect().width;
+ // Apply the inner element's size to the container and outline.
+ this.container_.style.width = width + 'px';
+ this.container_.style.height = height + 'px';
+ this.outline_.style.width = width + 'px';
+ this.outline_.style.height = height + 'px';
+ var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS * this.Constant_.TRANSITION_DURATION_FRACTION;
+ // Calculate transition delays for individual menu items, so that they fade
+ // in one at a time.
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+ for (var i = 0; i < items.length; i++) {
+ var itemDelay = null;
+ if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) || this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ itemDelay = (height - items[i].offsetTop - items[i].offsetHeight) / height * transitionDuration + 's';
+ } else {
+ itemDelay = items[i].offsetTop / height * transitionDuration + 's';
+ }
+ items[i].style.transitionDelay = itemDelay;
+ }
+ // Apply the initial clip to the text before we start animating.
+ this.applyClip_(height, width);
+ // Wait for the next frame, turn on animation, and apply the final clip.
+ // Also make it visible. This triggers the transitions.
+ window.requestAnimationFrame(function () {
+ this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+ this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
+ this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
+ }.bind(this));
+ // Clean up after the animation is complete.
+ this.addAnimationEndListener_();
+ // Add a click listener to the document, to close the menu.
+ var callback = function (e) {
+ // Check to see if the document is processing the same event that
+ // displayed the menu in the first place. If so, do nothing.
+ // Also check to see if the menu is in the process of closing itself, and
+ // do nothing in that case.
+ // Also check if the clicked element is a menu item
+ // if so, do nothing.
+ if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
+ document.removeEventListener('click', callback);
+ this.hide();
+ }
+ }.bind(this);
+ document.addEventListener('click', callback);
+ }
+};
+MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
+/**
+ * Hides the menu.
+ *
+ * @public
+ */
+MaterialMenu.prototype.hide = function () {
+ if (this.element_ && this.container_ && this.outline_) {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+ // Remove all transition delays; menu items fade out concurrently.
+ for (var i = 0; i < items.length; i++) {
+ items[i].style.removeProperty('transition-delay');
+ }
+ // Measure the inner element.
+ var rect = this.element_.getBoundingClientRect();
+ var height = rect.height;
+ var width = rect.width;
+ // Turn on animation, and apply the final clip. Also make invisible.
+ // This triggers the transitions.
+ this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+ this.applyClip_(height, width);
+ this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
+ // Clean up after the animation is complete.
+ this.addAnimationEndListener_();
+ }
+};
+MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
+/**
+ * Displays or hides the menu, depending on current state.
+ *
+ * @public
+ */
+MaterialMenu.prototype.toggle = function (evt) {
+ if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+ this.hide();
+ } else {
+ this.show(evt);
+ }
+};
+MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialMenu,
+ classAsString: 'MaterialMenu',
+ cssClass: 'mdl-js-menu',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Progress MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialProgress = function MaterialProgress(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialProgress'] = MaterialProgress;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialProgress.prototype.Constant_ = {};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialProgress.prototype.CssClasses_ = { INDETERMINATE_CLASS: 'mdl-progress__indeterminate' };
+/**
+ * Set the current progress of the progressbar.
+ *
+ * @param {number} p Percentage of the progress (0-100)
+ * @public
+ */
+MaterialProgress.prototype.setProgress = function (p) {
+ if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
+ return;
+ }
+ this.progressbar_.style.width = p + '%';
+};
+MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress;
+/**
+ * Set the current progress of the buffer.
+ *
+ * @param {number} p Percentage of the buffer (0-100)
+ * @public
+ */
+MaterialProgress.prototype.setBuffer = function (p) {
+ this.bufferbar_.style.width = p + '%';
+ this.auxbar_.style.width = 100 - p + '%';
+};
+MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer;
+/**
+ * Initialize element.
+ */
+MaterialProgress.prototype.init = function () {
+ if (this.element_) {
+ var el = document.createElement('div');
+ el.className = 'progressbar bar bar1';
+ this.element_.appendChild(el);
+ this.progressbar_ = el;
+ el = document.createElement('div');
+ el.className = 'bufferbar bar bar2';
+ this.element_.appendChild(el);
+ this.bufferbar_ = el;
+ el = document.createElement('div');
+ el.className = 'auxbar bar bar3';
+ this.element_.appendChild(el);
+ this.auxbar_ = el;
+ this.progressbar_.style.width = '0%';
+ this.bufferbar_.style.width = '100%';
+ this.auxbar_.style.width = '0%';
+ this.element_.classList.add('is-upgraded');
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialProgress,
+ classAsString: 'MaterialProgress',
+ cssClass: 'mdl-js-progress',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Radio MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialRadio = function MaterialRadio(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialRadio'] = MaterialRadio;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialRadio.prototype.CssClasses_ = {
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked',
+ IS_UPGRADED: 'is-upgraded',
+ JS_RADIO: 'mdl-js-radio',
+ RADIO_BTN: 'mdl-radio__button',
+ RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
+ RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onChange_ = function (event) {
+ // Since other radio buttons don't get change events, we need to look for
+ // them to update their classes.
+ var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
+ for (var i = 0; i < radios.length; i++) {
+ var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
+ // Different name == different group, so no point updating those.
+ if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
+ if (typeof radios[i]['MaterialRadio'] !== 'undefined') {
+ radios[i]['MaterialRadio'].updateClasses_();
+ }
+ }
+ }
+};
+/**
+ * Handle focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onMouseup_ = function (event) {
+ this.blur_();
+};
+/**
+ * Update classes.
+ *
+ * @private
+ */
+MaterialRadio.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialRadio.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.btnElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the components disabled state.
+ *
+ * @public
+ */
+MaterialRadio.prototype.checkDisabled = function () {
+ if (this.btnElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled;
+/**
+ * Check the components toggled state.
+ *
+ * @public
+ */
+MaterialRadio.prototype.checkToggleState = function () {
+ if (this.btnElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState;
+/**
+ * Disable radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.disable = function () {
+ this.btnElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
+/**
+ * Enable radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.enable = function () {
+ this.btnElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
+/**
+ * Check radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.check = function () {
+ this.btnElement_.checked = true;
+ this.onChange_(null);
+};
+MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
+/**
+ * Uncheck radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.uncheck = function () {
+ this.btnElement_.checked = false;
+ this.onChange_(null);
+};
+MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
+/**
+ * Initialize element.
+ */
+MaterialRadio.prototype.init = function () {
+ if (this.element_) {
+ this.btnElement_ = this.element_.querySelector('.' + this.CssClasses_.RADIO_BTN);
+ this.boundChangeHandler_ = this.onChange_.bind(this);
+ this.boundFocusHandler_ = this.onChange_.bind(this);
+ this.boundBlurHandler_ = this.onBlur_.bind(this);
+ this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
+ var outerCircle = document.createElement('span');
+ outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
+ var innerCircle = document.createElement('span');
+ innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
+ this.element_.appendChild(outerCircle);
+ this.element_.appendChild(innerCircle);
+ var rippleContainer;
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(ripple);
+ this.element_.appendChild(rippleContainer);
+ }
+ this.btnElement_.addEventListener('change', this.boundChangeHandler_);
+ this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
+ this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
+ this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
+ this.updateClasses_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialRadio,
+ classAsString: 'MaterialRadio',
+ cssClass: 'mdl-js-radio',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Slider MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialSlider = function MaterialSlider(element) {
+ this.element_ = element;
+ // Browser feature detection.
+ this.isIE_ = window.navigator.msPointerEnabled;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialSlider'] = MaterialSlider;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialSlider.prototype.Constant_ = {};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialSlider.prototype.CssClasses_ = {
+ IE_CONTAINER: 'mdl-slider__ie-container',
+ SLIDER_CONTAINER: 'mdl-slider__container',
+ BACKGROUND_FLEX: 'mdl-slider__background-flex',
+ BACKGROUND_LOWER: 'mdl-slider__background-lower',
+ BACKGROUND_UPPER: 'mdl-slider__background-upper',
+ IS_LOWEST_VALUE: 'is-lowest-value',
+ IS_UPGRADED: 'is-upgraded'
+};
+/**
+ * Handle input on element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSlider.prototype.onInput_ = function (event) {
+ this.updateValueStyles_();
+};
+/**
+ * Handle change on element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSlider.prototype.onChange_ = function (event) {
+ this.updateValueStyles_();
+};
+/**
+ * Handle mouseup on element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSlider.prototype.onMouseUp_ = function (event) {
+ event.target.blur();
+};
+/**
+ * Handle mousedown on container element.
+ * This handler is purpose is to not require the use to click
+ * exactly on the 2px slider element, as FireFox seems to be very
+ * strict about this.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ * @suppress {missingProperties}
+ */
+MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
+ // If this click is not on the parent element (but rather some child)
+ // ignore. It may still bubble up.
+ if (event.target !== this.element_.parentElement) {
+ return;
+ }
+ // Discard the original event and create a new event that
+ // is on the slider element.
+ event.preventDefault();
+ var newEvent = new MouseEvent('mousedown', {
+ target: event.target,
+ buttons: event.buttons,
+ clientX: event.clientX,
+ clientY: this.element_.getBoundingClientRect().y
+ });
+ this.element_.dispatchEvent(newEvent);
+};
+/**
+ * Handle updating of values.
+ *
+ * @private
+ */
+MaterialSlider.prototype.updateValueStyles_ = function () {
+ // Calculate and apply percentages to div structure behind slider.
+ var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min);
+ if (fraction === 0) {
+ this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
+ }
+ if (!this.isIE_) {
+ this.backgroundLower_.style.flex = fraction;
+ this.backgroundLower_.style.webkitFlex = fraction;
+ this.backgroundUpper_.style.flex = 1 - fraction;
+ this.backgroundUpper_.style.webkitFlex = 1 - fraction;
+ }
+};
+// Public methods.
+/**
+ * Disable slider.
+ *
+ * @public
+ */
+MaterialSlider.prototype.disable = function () {
+ this.element_.disabled = true;
+};
+MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
+/**
+ * Enable slider.
+ *
+ * @public
+ */
+MaterialSlider.prototype.enable = function () {
+ this.element_.disabled = false;
+};
+MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
+/**
+ * Update slider value.
+ *
+ * @param {number} value The value to which to set the control (optional).
+ * @public
+ */
+MaterialSlider.prototype.change = function (value) {
+ if (typeof value !== 'undefined') {
+ this.element_.value = value;
+ }
+ this.updateValueStyles_();
+};
+MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
+/**
+ * Initialize element.
+ */
+MaterialSlider.prototype.init = function () {
+ if (this.element_) {
+ if (this.isIE_) {
+ // Since we need to specify a very large height in IE due to
+ // implementation limitations, we add a parent here that trims it down to
+ // a reasonable size.
+ var containerIE = document.createElement('div');
+ containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
+ this.element_.parentElement.insertBefore(containerIE, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ containerIE.appendChild(this.element_);
+ } else {
+ // For non-IE browsers, we need a div structure that sits behind the
+ // slider and allows us to style the left and right sides of it with
+ // different colors.
+ var container = document.createElement('div');
+ container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
+ this.element_.parentElement.insertBefore(container, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ container.appendChild(this.element_);
+ var backgroundFlex = document.createElement('div');
+ backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
+ container.appendChild(backgroundFlex);
+ this.backgroundLower_ = document.createElement('div');
+ this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
+ backgroundFlex.appendChild(this.backgroundLower_);
+ this.backgroundUpper_ = document.createElement('div');
+ this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
+ backgroundFlex.appendChild(this.backgroundUpper_);
+ }
+ this.boundInputHandler = this.onInput_.bind(this);
+ this.boundChangeHandler = this.onChange_.bind(this);
+ this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+ this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
+ this.element_.addEventListener('input', this.boundInputHandler);
+ this.element_.addEventListener('change', this.boundChangeHandler);
+ this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+ this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
+ this.updateValueStyles_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSlider,
+ classAsString: 'MaterialSlider',
+ cssClass: 'mdl-js-slider',
+ widget: true
+});
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Snackbar MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialSnackbar = function MaterialSnackbar(element) {
+ this.element_ = element;
+ this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE);
+ this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION);
+ if (!this.textElement_) {
+ throw new Error('There must be a message element for a snackbar.');
+ }
+ if (!this.actionElement_) {
+ throw new Error('There must be an action element for a snackbar.');
+ }
+ this.active = false;
+ this.actionHandler_ = undefined;
+ this.message_ = undefined;
+ this.actionText_ = undefined;
+ this.queuedNotifications_ = [];
+ this.setActionHidden_(true);
+};
+window['MaterialSnackbar'] = MaterialSnackbar;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialSnackbar.prototype.Constant_ = {
+ // The duration of the snackbar show/hide animation, in ms.
+ ANIMATION_LENGTH: 250
+};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialSnackbar.prototype.cssClasses_ = {
+ SNACKBAR: 'mdl-snackbar',
+ MESSAGE: 'mdl-snackbar__text',
+ ACTION: 'mdl-snackbar__action',
+ ACTIVE: 'mdl-snackbar--active'
+};
+/**
+ * Display the snackbar.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.displaySnackbar_ = function () {
+ this.element_.setAttribute('aria-hidden', 'true');
+ if (this.actionHandler_) {
+ this.actionElement_.textContent = this.actionText_;
+ this.actionElement_.addEventListener('click', this.actionHandler_);
+ this.setActionHidden_(false);
+ }
+ this.textElement_.textContent = this.message_;
+ this.element_.classList.add(this.cssClasses_.ACTIVE);
+ this.element_.setAttribute('aria-hidden', 'false');
+ setTimeout(this.cleanup_.bind(this), this.timeout_);
+};
+/**
+ * Show the snackbar.
+ *
+ * @param {Object} data The data for the notification.
+ * @public
+ */
+MaterialSnackbar.prototype.showSnackbar = function (data) {
+ if (data === undefined) {
+ throw new Error('Please provide a data object with at least a message to display.');
+ }
+ if (data['message'] === undefined) {
+ throw new Error('Please provide a message to be displayed.');
+ }
+ if (data['actionHandler'] && !data['actionText']) {
+ throw new Error('Please provide action text with the handler.');
+ }
+ if (this.active) {
+ this.queuedNotifications_.push(data);
+ } else {
+ this.active = true;
+ this.message_ = data['message'];
+ if (data['timeout']) {
+ this.timeout_ = data['timeout'];
+ } else {
+ this.timeout_ = 2750;
+ }
+ if (data['actionHandler']) {
+ this.actionHandler_ = data['actionHandler'];
+ }
+ if (data['actionText']) {
+ this.actionText_ = data['actionText'];
+ }
+ this.displaySnackbar_();
+ }
+};
+MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
+/**
+ * Check if the queue has items within it.
+ * If it does, display the next entry.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.checkQueue_ = function () {
+ if (this.queuedNotifications_.length > 0) {
+ this.showSnackbar(this.queuedNotifications_.shift());
+ }
+};
+/**
+ * Cleanup the snackbar event listeners and accessiblity attributes.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.cleanup_ = function () {
+ this.element_.classList.remove(this.cssClasses_.ACTIVE);
+ setTimeout(function () {
+ this.element_.setAttribute('aria-hidden', 'true');
+ this.textElement_.textContent = '';
+ if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) {
+ this.setActionHidden_(true);
+ this.actionElement_.textContent = '';
+ this.actionElement_.removeEventListener('click', this.actionHandler_);
+ }
+ this.actionHandler_ = undefined;
+ this.message_ = undefined;
+ this.actionText_ = undefined;
+ this.active = false;
+ this.checkQueue_();
+ }.bind(this), this.Constant_.ANIMATION_LENGTH);
+};
+/**
+ * Set the action handler hidden state.
+ *
+ * @param {boolean} value
+ * @private
+ */
+MaterialSnackbar.prototype.setActionHidden_ = function (value) {
+ if (value) {
+ this.actionElement_.setAttribute('aria-hidden', 'true');
+ } else {
+ this.actionElement_.removeAttribute('aria-hidden');
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSnackbar,
+ classAsString: 'MaterialSnackbar',
+ cssClass: 'mdl-js-snackbar',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Spinner MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @param {HTMLElement} element The element that will be upgraded.
+ * @constructor
+ */
+var MaterialSpinner = function MaterialSpinner(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialSpinner'] = MaterialSpinner;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 };
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialSpinner.prototype.CssClasses_ = {
+ MDL_SPINNER_LAYER: 'mdl-spinner__layer',
+ MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
+ MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
+ MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
+ MDL_SPINNER_LEFT: 'mdl-spinner__left',
+ MDL_SPINNER_RIGHT: 'mdl-spinner__right'
+};
+/**
+ * Auxiliary method to create a spinner layer.
+ *
+ * @param {number} index Index of the layer to be created.
+ * @public
+ */
+MaterialSpinner.prototype.createLayer = function (index) {
+ var layer = document.createElement('div');
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
+ var leftClipper = document.createElement('div');
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
+ var gapPatch = document.createElement('div');
+ gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
+ var rightClipper = document.createElement('div');
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
+ var circleOwners = [
+ leftClipper,
+ gapPatch,
+ rightClipper
+ ];
+ for (var i = 0; i < circleOwners.length; i++) {
+ var circle = document.createElement('div');
+ circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
+ circleOwners[i].appendChild(circle);
+ }
+ layer.appendChild(leftClipper);
+ layer.appendChild(gapPatch);
+ layer.appendChild(rightClipper);
+ this.element_.appendChild(layer);
+};
+MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer;
+/**
+ * Stops the spinner animation.
+ * Public method for users who need to stop the spinner for any reason.
+ *
+ * @public
+ */
+MaterialSpinner.prototype.stop = function () {
+ this.element_.classList.remove('is-active');
+};
+MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
+/**
+ * Starts the spinner animation.
+ * Public method for users who need to manually start the spinner for any reason
+ * (instead of just adding the 'is-active' class to their markup).
+ *
+ * @public
+ */
+MaterialSpinner.prototype.start = function () {
+ this.element_.classList.add('is-active');
+};
+MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
+/**
+ * Initialize element.
+ */
+MaterialSpinner.prototype.init = function () {
+ if (this.element_) {
+ for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
+ this.createLayer(i);
+ }
+ this.element_.classList.add('is-upgraded');
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSpinner,
+ classAsString: 'MaterialSpinner',
+ cssClass: 'mdl-js-spinner',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Checkbox MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialSwitch = function MaterialSwitch(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialSwitch'] = MaterialSwitch;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialSwitch.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialSwitch.prototype.CssClasses_ = {
+ INPUT: 'mdl-switch__input',
+ TRACK: 'mdl-switch__track',
+ THUMB: 'mdl-switch__thumb',
+ FOCUS_HELPER: 'mdl-switch__focus-helper',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSwitch.prototype.onChange_ = function (event) {
+ this.updateClasses_();
+};
+/**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSwitch.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSwitch.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSwitch.prototype.onMouseUp_ = function (event) {
+ this.blur_();
+};
+/**
+ * Handle class updates.
+ *
+ * @private
+ */
+MaterialSwitch.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialSwitch.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.inputElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the components disabled state.
+ *
+ * @public
+ */
+MaterialSwitch.prototype.checkDisabled = function () {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialSwitch.prototype['checkDisabled'] = MaterialSwitch.prototype.checkDisabled;
+/**
+ * Check the components toggled state.
+ *
+ * @public
+ */
+MaterialSwitch.prototype.checkToggleState = function () {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialSwitch.prototype['checkToggleState'] = MaterialSwitch.prototype.checkToggleState;
+/**
+ * Disable switch.
+ *
+ * @public
+ */
+MaterialSwitch.prototype.disable = function () {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable;
+/**
+ * Enable switch.
+ *
+ * @public
+ */
+MaterialSwitch.prototype.enable = function () {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable;
+/**
+ * Activate switch.
+ *
+ * @public
+ */
+MaterialSwitch.prototype.on = function () {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+};
+MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on;
+/**
+ * Deactivate switch.
+ *
+ * @public
+ */
+MaterialSwitch.prototype.off = function () {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+};
+MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off;
+/**
+ * Initialize element.
+ */
+MaterialSwitch.prototype.init = function () {
+ if (this.element_) {
+ this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+ var track = document.createElement('div');
+ track.classList.add(this.CssClasses_.TRACK);
+ var thumb = document.createElement('div');
+ thumb.classList.add(this.CssClasses_.THUMB);
+ var focusHelper = document.createElement('span');
+ focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
+ thumb.appendChild(focusHelper);
+ this.element_.appendChild(track);
+ this.element_.appendChild(thumb);
+ this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ this.rippleContainerElement_ = document.createElement('span');
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ this.rippleContainerElement_.appendChild(ripple);
+ this.element_.appendChild(this.rippleContainerElement_);
+ }
+ this.boundChangeHandler = this.onChange_.bind(this);
+ this.boundFocusHandler = this.onFocus_.bind(this);
+ this.boundBlurHandler = this.onBlur_.bind(this);
+ this.inputElement_.addEventListener('change', this.boundChangeHandler);
+ this.inputElement_.addEventListener('focus', this.boundFocusHandler);
+ this.inputElement_.addEventListener('blur', this.boundBlurHandler);
+ this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+ this.updateClasses_();
+ this.element_.classList.add('is-upgraded');
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSwitch,
+ classAsString: 'MaterialSwitch',
+ cssClass: 'mdl-js-switch',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Tabs MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {Element} element The element that will be upgraded.
+ */
+var MaterialTabs = function MaterialTabs(element) {
+ // Stores the HTML element.
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialTabs'] = MaterialTabs;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialTabs.prototype.Constant_ = {};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialTabs.prototype.CssClasses_ = {
+ TAB_CLASS: 'mdl-tabs__tab',
+ PANEL_CLASS: 'mdl-tabs__panel',
+ ACTIVE_CLASS: 'is-active',
+ UPGRADED_CLASS: 'is-upgraded',
+ MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
+ MDL_RIPPLE: 'mdl-ripple',
+ MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+};
+/**
+ * Handle clicks to a tabs component
+ *
+ * @private
+ */
+MaterialTabs.prototype.initTabs_ = function () {
+ if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+ }
+ // Select element tabs, document panels
+ this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
+ this.panels_ = this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
+ // Create new tabs for each tab element
+ for (var i = 0; i < this.tabs_.length; i++) {
+ new MaterialTab(this.tabs_[i], this);
+ }
+ this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
+};
+/**
+ * Reset tab state, dropping active classes
+ *
+ * @private
+ */
+MaterialTabs.prototype.resetTabState_ = function () {
+ for (var k = 0; k < this.tabs_.length; k++) {
+ this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+ }
+};
+/**
+ * Reset panel state, droping active classes
+ *
+ * @private
+ */
+MaterialTabs.prototype.resetPanelState_ = function () {
+ for (var j = 0; j < this.panels_.length; j++) {
+ this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+ }
+};
+/**
+ * Initialize element.
+ */
+MaterialTabs.prototype.init = function () {
+ if (this.element_) {
+ this.initTabs_();
+ }
+};
+/**
+ * Constructor for an individual tab.
+ *
+ * @constructor
+ * @param {Element} tab The HTML element for the tab.
+ * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
+ */
+function MaterialTab(tab, ctx) {
+ if (tab) {
+ if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
+ rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
+ var ripple = document.createElement('span');
+ ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
+ rippleContainer.appendChild(ripple);
+ tab.appendChild(rippleContainer);
+ }
+ tab.addEventListener('click', function (e) {
+ if (tab.getAttribute('href').charAt(0) === '#') {
+ e.preventDefault();
+ var href = tab.href.split('#')[1];
+ var panel = ctx.element_.querySelector('#' + href);
+ ctx.resetTabState_();
+ ctx.resetPanelState_();
+ tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+ panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+ }
+ });
+ }
+}
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialTabs,
+ classAsString: 'MaterialTabs',
+ cssClass: 'mdl-js-tabs'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Textfield MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialTextfield = function MaterialTextfield(element) {
+ this.element_ = element;
+ this.maxRows = this.Constant_.NO_MAX_ROWS;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialTextfield'] = MaterialTextfield;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialTextfield.prototype.Constant_ = {
+ NO_MAX_ROWS: -1,
+ MAX_ROWS_ATTRIBUTE: 'maxrows'
+};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialTextfield.prototype.CssClasses_ = {
+ LABEL: 'mdl-textfield__label',
+ INPUT: 'mdl-textfield__input',
+ IS_DIRTY: 'is-dirty',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_INVALID: 'is-invalid',
+ IS_UPGRADED: 'is-upgraded',
+ HAS_PLACEHOLDER: 'has-placeholder'
+};
+/**
+ * Handle input being entered.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialTextfield.prototype.onKeyDown_ = function (event) {
+ var currentRowCount = event.target.value.split('\n').length;
+ if (event.keyCode === 13) {
+ if (currentRowCount >= this.maxRows) {
+ event.preventDefault();
+ }
+ }
+};
+/**
+ * Handle focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialTextfield.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialTextfield.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle reset event from out side.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialTextfield.prototype.onReset_ = function (event) {
+ this.updateClasses_();
+};
+/**
+ * Handle class updates.
+ *
+ * @private
+ */
+MaterialTextfield.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkValidity();
+ this.checkDirty();
+ this.checkFocus();
+};
+// Public methods.
+/**
+ * Check the disabled state and update field accordingly.
+ *
+ * @public
+ */
+MaterialTextfield.prototype.checkDisabled = function () {
+ if (this.input_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled;
+/**
+ * Check the focus state and update field accordingly.
+ *
+ * @public
+ */
+MaterialTextfield.prototype.checkFocus = function () {
+ if (Boolean(this.element_.querySelector(':focus'))) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+ }
+};
+MaterialTextfield.prototype['checkFocus'] = MaterialTextfield.prototype.checkFocus;
+/**
+ * Check the validity state and update field accordingly.
+ *
+ * @public
+ */
+MaterialTextfield.prototype.checkValidity = function () {
+ if (this.input_.validity) {
+ if (this.input_.validity.valid) {
+ this.element_.classList.remove(this.CssClasses_.IS_INVALID);
+ } else {
+ this.element_.classList.add(this.CssClasses_.IS_INVALID);
+ }
+ }
+};
+MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity;
+/**
+ * Check the dirty state and update field accordingly.
+ *
+ * @public
+ */
+MaterialTextfield.prototype.checkDirty = function () {
+ if (this.input_.value && this.input_.value.length > 0) {
+ this.element_.classList.add(this.CssClasses_.IS_DIRTY);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
+ }
+};
+MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty;
+/**
+ * Disable text field.
+ *
+ * @public
+ */
+MaterialTextfield.prototype.disable = function () {
+ this.input_.disabled = true;
+ this.updateClasses_();
+};
+MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
+/**
+ * Enable text field.
+ *
+ * @public
+ */
+MaterialTextfield.prototype.enable = function () {
+ this.input_.disabled = false;
+ this.updateClasses_();
+};
+MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
+/**
+ * Update text field value.
+ *
+ * @param {string} value The value to which to set the control (optional).
+ * @public
+ */
+MaterialTextfield.prototype.change = function (value) {
+ this.input_.value = value || '';
+ this.updateClasses_();
+};
+MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
+/**
+ * Initialize element.
+ */
+MaterialTextfield.prototype.init = function () {
+ if (this.element_) {
+ this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
+ this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+ if (this.input_) {
+ if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
+ this.maxRows = parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
+ if (isNaN(this.maxRows)) {
+ this.maxRows = this.Constant_.NO_MAX_ROWS;
+ }
+ }
+ if (this.input_.hasAttribute('placeholder')) {
+ this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER);
+ }
+ this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
+ this.boundFocusHandler = this.onFocus_.bind(this);
+ this.boundBlurHandler = this.onBlur_.bind(this);
+ this.boundResetHandler = this.onReset_.bind(this);
+ this.input_.addEventListener('input', this.boundUpdateClassesHandler);
+ this.input_.addEventListener('focus', this.boundFocusHandler);
+ this.input_.addEventListener('blur', this.boundBlurHandler);
+ this.input_.addEventListener('reset', this.boundResetHandler);
+ if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
+ // TODO: This should handle pasting multi line text.
+ // Currently doesn't.
+ this.boundKeyDownHandler = this.onKeyDown_.bind(this);
+ this.input_.addEventListener('keydown', this.boundKeyDownHandler);
+ }
+ var invalid = this.element_.classList.contains(this.CssClasses_.IS_INVALID);
+ this.updateClasses_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ if (invalid) {
+ this.element_.classList.add(this.CssClasses_.IS_INVALID);
+ }
+ if (this.input_.hasAttribute('autofocus')) {
+ this.element_.focus();
+ this.checkFocus();
+ }
+ }
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialTextfield,
+ classAsString: 'MaterialTextfield',
+ cssClass: 'mdl-js-textfield',
+ widget: true
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Tooltip MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialTooltip = function MaterialTooltip(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialTooltip'] = MaterialTooltip;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialTooltip.prototype.Constant_ = {};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialTooltip.prototype.CssClasses_ = {
+ IS_ACTIVE: 'is-active',
+ BOTTOM: 'mdl-tooltip--bottom',
+ LEFT: 'mdl-tooltip--left',
+ RIGHT: 'mdl-tooltip--right',
+ TOP: 'mdl-tooltip--top'
+};
+/**
+ * Handle mouseenter for tooltip.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialTooltip.prototype.handleMouseEnter_ = function (event) {
+ var props = event.target.getBoundingClientRect();
+ var left = props.left + props.width / 2;
+ var top = props.top + props.height / 2;
+ var marginLeft = -1 * (this.element_.offsetWidth / 2);
+ var marginTop = -1 * (this.element_.offsetHeight / 2);
+ if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {
+ left = props.width / 2;
+ if (top + marginTop < 0) {
+ this.element_.style.top = '0';
+ this.element_.style.marginTop = '0';
+ } else {
+ this.element_.style.top = top + 'px';
+ this.element_.style.marginTop = marginTop + 'px';
+ }
+ } else {
+ if (left + marginLeft < 0) {
+ this.element_.style.left = '0';
+ this.element_.style.marginLeft = '0';
+ } else {
+ this.element_.style.left = left + 'px';
+ this.element_.style.marginLeft = marginLeft + 'px';
+ }
+ }
+ if (this.element_.classList.contains(this.CssClasses_.TOP)) {
+ this.element_.style.top = props.top - this.element_.offsetHeight - 10 + 'px';
+ } else if (this.element_.classList.contains(this.CssClasses_.RIGHT)) {
+ this.element_.style.left = props.left + props.width + 10 + 'px';
+ } else if (this.element_.classList.contains(this.CssClasses_.LEFT)) {
+ this.element_.style.left = props.left - this.element_.offsetWidth - 10 + 'px';
+ } else {
+ this.element_.style.top = props.top + props.height + 10 + 'px';
+ }
+ this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
+};
+/**
+ * Hide tooltip on mouseleave or scroll
+ *
+ * @private
+ */
+MaterialTooltip.prototype.hideTooltip_ = function () {
+ this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
+};
+/**
+ * Initialize element.
+ */
+MaterialTooltip.prototype.init = function () {
+ if (this.element_) {
+ var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
+ if (forElId) {
+ this.forElement_ = document.getElementById(forElId);
+ }
+ if (this.forElement_) {
+ // It's left here because it prevents accidental text selection on Android
+ if (!this.forElement_.hasAttribute('tabindex')) {
+ this.forElement_.setAttribute('tabindex', '0');
+ }
+ this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
+ this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this);
+ this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
+ this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);
+ this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+ window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+ window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+ }
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialTooltip,
+ classAsString: 'MaterialTooltip',
+ cssClass: 'mdl-tooltip'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Layout MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialLayout = function MaterialLayout(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialLayout'] = MaterialLayout;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialLayout.prototype.Constant_ = {
+ MAX_WIDTH: '(max-width: 1024px)',
+ TAB_SCROLL_PIXELS: 100,
+ RESIZE_TIMEOUT: 100,
+ MENU_ICON: '',
+ CHEVRON_LEFT: 'chevron_left',
+ CHEVRON_RIGHT: 'chevron_right'
+};
+/**
+ * Keycodes, for code readability.
+ *
+ * @enum {number}
+ * @private
+ */
+MaterialLayout.prototype.Keycodes_ = {
+ ENTER: 13,
+ ESCAPE: 27,
+ SPACE: 32
+};
+/**
+ * Modes.
+ *
+ * @enum {number}
+ * @private
+ */
+MaterialLayout.prototype.Mode_ = {
+ STANDARD: 0,
+ SEAMED: 1,
+ WATERFALL: 2,
+ SCROLL: 3
+};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialLayout.prototype.CssClasses_ = {
+ CONTAINER: 'mdl-layout__container',
+ HEADER: 'mdl-layout__header',
+ DRAWER: 'mdl-layout__drawer',
+ CONTENT: 'mdl-layout__content',
+ DRAWER_BTN: 'mdl-layout__drawer-button',
+ ICON: 'material-icons',
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
+ RIPPLE: 'mdl-ripple',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ HEADER_SEAMED: 'mdl-layout__header--seamed',
+ HEADER_WATERFALL: 'mdl-layout__header--waterfall',
+ HEADER_SCROLL: 'mdl-layout__header--scroll',
+ FIXED_HEADER: 'mdl-layout--fixed-header',
+ OBFUSCATOR: 'mdl-layout__obfuscator',
+ TAB_BAR: 'mdl-layout__tab-bar',
+ TAB_CONTAINER: 'mdl-layout__tab-bar-container',
+ TAB: 'mdl-layout__tab',
+ TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
+ TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
+ TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
+ TAB_MANUAL_SWITCH: 'mdl-layout__tab-manual-switch',
+ PANEL: 'mdl-layout__tab-panel',
+ HAS_DRAWER: 'has-drawer',
+ HAS_TABS: 'has-tabs',
+ HAS_SCROLLING_HEADER: 'has-scrolling-header',
+ CASTING_SHADOW: 'is-casting-shadow',
+ IS_COMPACT: 'is-compact',
+ IS_SMALL_SCREEN: 'is-small-screen',
+ IS_DRAWER_OPEN: 'is-visible',
+ IS_ACTIVE: 'is-active',
+ IS_UPGRADED: 'is-upgraded',
+ IS_ANIMATING: 'is-animating',
+ ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
+ ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
+};
+/**
+ * Handles scrolling on the content.
+ *
+ * @private
+ */
+MaterialLayout.prototype.contentScrollHandler_ = function () {
+ if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
+ return;
+ }
+ var headerVisible = !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
+ if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+ this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+ this.header_.classList.add(this.CssClasses_.IS_COMPACT);
+ if (headerVisible) {
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+ }
+ } else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+ this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+ this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+ if (headerVisible) {
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+ }
+ }
+};
+/**
+ * Handles a keyboard event on the drawer.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+MaterialLayout.prototype.keyboardEventHandler_ = function (evt) {
+ // Only react when the drawer is open.
+ if (evt.keyCode === this.Keycodes_.ESCAPE && this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+ this.toggleDrawer();
+ }
+};
+/**
+ * Handles changes in screen size.
+ *
+ * @private
+ */
+MaterialLayout.prototype.screenSizeHandler_ = function () {
+ if (this.screenSizeMediaQuery_.matches) {
+ this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
+ // Collapse drawer (if any) when moving to a large screen size.
+ if (this.drawer_) {
+ this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+ this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+ }
+ }
+};
+/**
+ * Handles events of drawer button.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+MaterialLayout.prototype.drawerToggleHandler_ = function (evt) {
+ if (evt && evt.type === 'keydown') {
+ if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+ // prevent scrolling in drawer nav
+ evt.preventDefault();
+ } else {
+ // prevent other keys
+ return;
+ }
+ }
+ this.toggleDrawer();
+};
+/**
+ * Handles (un)setting the `is-animating` class
+ *
+ * @private
+ */
+MaterialLayout.prototype.headerTransitionEndHandler_ = function () {
+ this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
+};
+/**
+ * Handles expanding the header on click
+ *
+ * @private
+ */
+MaterialLayout.prototype.headerClickHandler_ = function () {
+ if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+ this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+ }
+};
+/**
+ * Reset tab state, dropping active classes
+ *
+ * @private
+ */
+MaterialLayout.prototype.resetTabState_ = function (tabBar) {
+ for (var k = 0; k < tabBar.length; k++) {
+ tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+};
+/**
+ * Reset panel state, droping active classes
+ *
+ * @private
+ */
+MaterialLayout.prototype.resetPanelState_ = function (panels) {
+ for (var j = 0; j < panels.length; j++) {
+ panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+};
+/**
+ * Toggle drawer state
+ *
+ * @public
+ */
+MaterialLayout.prototype.toggleDrawer = function () {
+ var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+ this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+ this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+ // Set accessibility properties.
+ if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+ this.drawer_.setAttribute('aria-hidden', 'false');
+ drawerButton.setAttribute('aria-expanded', 'true');
+ } else {
+ this.drawer_.setAttribute('aria-hidden', 'true');
+ drawerButton.setAttribute('aria-expanded', 'false');
+ }
+};
+MaterialLayout.prototype['toggleDrawer'] = MaterialLayout.prototype.toggleDrawer;
+/**
+ * Initialize element.
+ */
+MaterialLayout.prototype.init = function () {
+ if (this.element_) {
+ var container = document.createElement('div');
+ container.classList.add(this.CssClasses_.CONTAINER);
+ var focusedElement = this.element_.querySelector(':focus');
+ this.element_.parentElement.insertBefore(container, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ container.appendChild(this.element_);
+ if (focusedElement) {
+ focusedElement.focus();
+ }
+ var directChildren = this.element_.childNodes;
+ var numChildren = directChildren.length;
+ for (var c = 0; c < numChildren; c++) {
+ var child = directChildren[c];
+ if (child.classList && child.classList.contains(this.CssClasses_.HEADER)) {
+ this.header_ = child;
+ }
+ if (child.classList && child.classList.contains(this.CssClasses_.DRAWER)) {
+ this.drawer_ = child;
+ }
+ if (child.classList && child.classList.contains(this.CssClasses_.CONTENT)) {
+ this.content_ = child;
+ }
+ }
+ window.addEventListener('pageshow', function (e) {
+ if (e.persisted) {
+ // when page is loaded from back/forward cache
+ // trigger repaint to let layout scroll in safari
+ this.element_.style.overflowY = 'hidden';
+ requestAnimationFrame(function () {
+ this.element_.style.overflowY = '';
+ }.bind(this));
+ }
+ }.bind(this), false);
+ if (this.header_) {
+ this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
+ }
+ var mode = this.Mode_.STANDARD;
+ if (this.header_) {
+ if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
+ mode = this.Mode_.SEAMED;
+ } else if (this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)) {
+ mode = this.Mode_.WATERFALL;
+ this.header_.addEventListener('transitionend', this.headerTransitionEndHandler_.bind(this));
+ this.header_.addEventListener('click', this.headerClickHandler_.bind(this));
+ } else if (this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)) {
+ mode = this.Mode_.SCROLL;
+ container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+ }
+ if (mode === this.Mode_.STANDARD) {
+ this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+ if (this.tabBar_) {
+ this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
+ }
+ } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
+ this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+ if (this.tabBar_) {
+ this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+ }
+ } else if (mode === this.Mode_.WATERFALL) {
+ // Add and remove shadows depending on scroll position.
+ // Also add/remove auxiliary class for styling of the compact version of
+ // the header.
+ this.content_.addEventListener('scroll', this.contentScrollHandler_.bind(this));
+ this.contentScrollHandler_();
+ }
+ }
+ // Add drawer toggling button to our layout, if we have an openable drawer.
+ if (this.drawer_) {
+ var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+ if (!drawerButton) {
+ drawerButton = document.createElement('div');
+ drawerButton.setAttribute('aria-expanded', 'false');
+ drawerButton.setAttribute('role', 'button');
+ drawerButton.setAttribute('tabindex', '0');
+ drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+ var drawerButtonIcon = document.createElement('i');
+ drawerButtonIcon.classList.add(this.CssClasses_.ICON);
+ drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
+ drawerButton.appendChild(drawerButtonIcon);
+ }
+ if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
+ //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
+ drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
+ } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
+ //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
+ drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
+ }
+ drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this));
+ drawerButton.addEventListener('keydown', this.drawerToggleHandler_.bind(this));
+ // Add a class if the layout has a drawer, for altering the left padding.
+ // Adds the HAS_DRAWER to the elements since this.header_ may or may
+ // not be present.
+ this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
+ // If we have a fixed header, add the button to the header rather than
+ // the layout.
+ if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
+ this.header_.insertBefore(drawerButton, this.header_.firstChild);
+ } else {
+ this.element_.insertBefore(drawerButton, this.content_);
+ }
+ var obfuscator = document.createElement('div');
+ obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
+ this.element_.appendChild(obfuscator);
+ obfuscator.addEventListener('click', this.drawerToggleHandler_.bind(this));
+ this.obfuscator_ = obfuscator;
+ this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
+ this.drawer_.setAttribute('aria-hidden', 'true');
+ }
+ // Keep an eye on screen size, and add/remove auxiliary class for styling
+ // of small screens.
+ this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
+ this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
+ this.screenSizeHandler_();
+ // Initialize tabs, if any.
+ if (this.header_ && this.tabBar_) {
+ this.element_.classList.add(this.CssClasses_.HAS_TABS);
+ var tabContainer = document.createElement('div');
+ tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
+ this.header_.insertBefore(tabContainer, this.tabBar_);
+ this.header_.removeChild(this.tabBar_);
+ var leftButton = document.createElement('div');
+ leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+ leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
+ var leftButtonIcon = document.createElement('i');
+ leftButtonIcon.classList.add(this.CssClasses_.ICON);
+ leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
+ leftButton.appendChild(leftButtonIcon);
+ leftButton.addEventListener('click', function () {
+ this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
+ }.bind(this));
+ var rightButton = document.createElement('div');
+ rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+ rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
+ var rightButtonIcon = document.createElement('i');
+ rightButtonIcon.classList.add(this.CssClasses_.ICON);
+ rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
+ rightButton.appendChild(rightButtonIcon);
+ rightButton.addEventListener('click', function () {
+ this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
+ }.bind(this));
+ tabContainer.appendChild(leftButton);
+ tabContainer.appendChild(this.tabBar_);
+ tabContainer.appendChild(rightButton);
+ // Add and remove tab buttons depending on scroll position and total
+ // window size.
+ var tabUpdateHandler = function () {
+ if (this.tabBar_.scrollLeft > 0) {
+ leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
+ } else {
+ leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+ if (this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
+ rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
+ } else {
+ rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+ }
+ }.bind(this);
+ this.tabBar_.addEventListener('scroll', tabUpdateHandler);
+ tabUpdateHandler();
+ // Update tabs when the window resizes.
+ var windowResizeHandler = function () {
+ // Use timeouts to make sure it doesn't happen too often.
+ if (this.resizeTimeoutId_) {
+ clearTimeout(this.resizeTimeoutId_);
+ }
+ this.resizeTimeoutId_ = setTimeout(function () {
+ tabUpdateHandler();
+ this.resizeTimeoutId_ = null;
+ }.bind(this), this.Constant_.RESIZE_TIMEOUT);
+ }.bind(this);
+ window.addEventListener('resize', windowResizeHandler);
+ if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+ this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ }
+ // Select element tabs, document panels
+ var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
+ var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
+ // Create new tabs for each tab element
+ for (var i = 0; i < tabs.length; i++) {
+ new MaterialLayoutTab(tabs[i], tabs, panels, this);
+ }
+ }
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+/**
+ * Constructor for an individual tab.
+ *
+ * @constructor
+ * @param {HTMLElement} tab The HTML element for the tab.
+ * @param {!Array} tabs Array with HTML elements for all tabs.
+ * @param {!Array} panels Array with HTML elements for all panels.
+ * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
+ */
+function MaterialLayoutTab(tab, tabs, panels, layout) {
+ /**
+ * Auxiliary method to programmatically select a tab in the UI.
+ */
+ function selectTab() {
+ var href = tab.href.split('#')[1];
+ var panel = layout.content_.querySelector('#' + href);
+ layout.resetTabState_(tabs);
+ layout.resetPanelState_(panels);
+ tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+ panel.classList.add(layout.CssClasses_.IS_ACTIVE);
+ }
+ if (layout.tabBar_.classList.contains(layout.CssClasses_.JS_RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
+ rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
+ var ripple = document.createElement('span');
+ ripple.classList.add(layout.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(ripple);
+ tab.appendChild(rippleContainer);
+ }
+ if (!layout.tabBar_.classList.contains(layout.CssClasses_.TAB_MANUAL_SWITCH)) {
+ tab.addEventListener('click', function (e) {
+ if (tab.getAttribute('href').charAt(0) === '#') {
+ e.preventDefault();
+ selectTab();
+ }
+ });
+ }
+ tab.show = selectTab;
+}
+window['MaterialLayoutTab'] = MaterialLayoutTab;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialLayout,
+ classAsString: 'MaterialLayout',
+ cssClass: 'mdl-js-layout'
+});
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Class constructor for Data Table Card MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {Element} element The element that will be upgraded.
+ */
+var MaterialDataTable = function MaterialDataTable(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialDataTable'] = MaterialDataTable;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialDataTable.prototype.Constant_ = {};
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+MaterialDataTable.prototype.CssClasses_ = {
+ DATA_TABLE: 'mdl-data-table',
+ SELECTABLE: 'mdl-data-table--selectable',
+ SELECT_ELEMENT: 'mdl-data-table__select',
+ IS_SELECTED: 'is-selected',
+ IS_UPGRADED: 'is-upgraded'
+};
+/**
+ * Generates and returns a function that toggles the selection state of a
+ * single row (or multiple rows).
+ *
+ * @param {Element} checkbox Checkbox that toggles the selection state.
+ * @param {Element} row Row to toggle when checkbox changes.
+ * @param {(Array
