body { font-family: "Segoe Print"; } .header {  background-color:#000; /*#4d4d4d*/ display: inline-block; width: 100%; border: none; min-height: 50px; color: black; margin: 0%; padding: 0%; position: fixed; top:0px; left: 0px; z-index: 999; }  .logoContainerClass{ display: inline-block; }  img { float: left; }  .dropbtn { background-color: #000; color: #fff; position: relative; /*padding: 16px;*/ font-family: "Segoe Print"; font-size: 16px; font-weight: lighter; height: 25px; border: none; outline: none; }  .dropdown { overflow: hidden; float: left; padding: 12px 3% 12px 3%;\ width: 80%; font-weight: lighter; /*z-index: 999;*/ }  .LogoContainerClass .icon { display: none; }  .dropdown-content { display: none; position: absolute; background-color: #f1f1f1 font-weight: 10; margin-top: 12px; /*z-index: 999; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;*/ }  .dropdown-content button { color: white; background-color: #606060; font-family: "Segoe Print"; padding: 12px 16px; text-decoration: none; text-align: left; display: block; border: none; width: 100%; outline: none; }  .dropdown-content button:hover {background-color: black;}  .dropdown:hover .dropdown-content { display: block; }  .dropdown:hover .dropbtn { background-color: black; }  .loginButtonContainerClass { margin: 0%; padding:12.5px 5px 12.5px 0%; position: fixed; right: 0px; top: 0px; }  .loginButtonContainerClass button{  width: 25px; height: 25px; margin: 0; padding: 0; border: none; }  .loginButtonContainerClass img{ width: 25px; height: 25px; float: right; padding: 0%; margin: 0%; color: white; }  .mainContent{ width: 100%; min-height: 100vh; background-color: #ffffff; /*#4d4d4d*/ border: none; overflow: hidden; margin-top: 50px; }  h1{ margin: 0px; padding:0px; font-size: 20px;}  .menuBarInputTextBreakerClass{ height: 20px; }  .mainContainer {  width: 50%; font-size: 0px; text-align: center; border-radius: 5px; border-width: 0.5px; margin: 0% 3% 0% 3%; padding: 0% 10% 0% 10%; font-weight: lighter; }  .mainPracticeContainer {  width: 70%; font-size: 0px; text-align: center; border-radius: 5px; border-width: 0.5px; margin: 0% 3% 0% 3%; padding: 0% 10% 0% 10%; font-weight: lighter; }  #browser{ font-size:15px; }  .inputTextBoxContainerClass {  /*position: relative;*/ background-color: #ffffff; /*#4d4d4d*/ margin: auto; text-align: left; width: 100%; }  .practiceProblemContainerClass {  background-color: #ffffff; /*#4d4d4d*/ margin: auto; text-align: left; width: 100%; }  #inputTextSpanContainer{ position: relative; float: left; width: 89%; }  #practiceDivContainer{ float: left; width: calc(90% - 20px); }  #inputTextBoxDivContainer{ width: 100%; }  #inout{  background-color: #ffffff; /*#4d4d4d*/ padding-left: 3px; border-style: solid; border-color: black; text-align: left; width: 100%; font-size: 20px; min-height: 60px; border-radius: 5px; border-width: 0.5px; }  #practiceQuestionBoxID{  background-color: #ffffff; /*#4d4d4d*/ border-style: solid; border-color: black; text-align: left; width: 100%; font-size: 20px; min-height: 60px; border-radius: 5px; border-width: 0.5px; }  #inputTextBoxGoButtonContainer{ float: left; width: 10%; margin-left: 1% }  #inputTextBoxGoButtonID{  background-color:#000; color: white; width:100%; height:45px; border-radius: 5px; border-width: 2px; border-color: #b3b3b3; font-size: 15px; }  .solverResponseClass{  font-size: 15px; margin-top:10px; padding: 0px 5px; width: 100%; float: left; }  #prevBtnID, #nextBtnID { width: 5%; float: left; height: 30px; padding: 0%; background-color: #000; color: #fff; border-width: 0.5px; border-color: #b3b3b3; border-radius: 5px; }  #prevBtnID { margin: 15px 1% 15px 0%; }  #nextBtnID { margin: 15px 0% 15px 1%; }  #practiceQuestionBoxGoButtonID {  width: 10%; height: 30px; margin: 10px 40% 10px 40%; text-align: center; padding: 0%; background-color: #000; color: #fff; border-width: 0.5px; border-color: #b3b3b3; border-radius: 5px; }  .tabKeySolutionExampleContainerClass{ background-color: #ffffff; /*#4d4d4d*/ border-style: none; text-align: left; border-radius: 5px; border-width: 0.5px; font-size: 15px; margin-top: 3%; width: 100%; padding: 0; float: left; z-index:-1; }  .tabBtnClass{ border: none; outline: none; background-color: #000; width: 25%; height: 25px; font-family: "Segoe Print"; border-top-left-radius: 5px; border-top-right-radius: 5px; border-width: 0.5px; font-size: 15px; font-weight: 10; color: white; margin: 0px; padding: 0px; }  .keyPadContainerClass{ padding-top: 20px; padding-left: 5px; padding-right: 5px; background-color: #606060; /*#4d4d4d*/ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin: 0px; }  .commonKeyPadClass, .alphaKeyPadClass, .greekKeyPadClass, .matrixKeyPadClass { table-layout: fixed; width: 100%; font-size: 15px; font-weight: lighter;  }  .specialKeys1PadClass{ table-layout: fixed; width: 100%; font-size: 0px; font-weight: lighter; }  .button {  background-color: #000000; border-style: solid; border-width: 0.5px; border-color: #b3b3b3; border-radius: 5px; color: white; padding: 2px 2px; text-align: center; text-decoration: none; font-family: "Segoe Print";       font-size: 16px; font-weight: lighter; display: inline-block; cursor: pointer; height: 30px; width: 100%; margin: auto; }  .buttonSpl {  background-color: #000000; border-style: solid; border-width: 0.5px; border-color: #b3b3b3; border-radius: 5px; color: white; padding: 2px 2px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; height: 45px; width: 100%; margin: auto; }  .btnToggle {  background-color: #000000; border-style: solid; border-width: 0.5px; border-color: #b3b3b3; border-radius: 5px; color: white; display: inline-block; text-align: center; text-decoration: none; display: inline-block; float: left; cursor: pointer; height: 30px; width: 12%; margin: 0.5%; }  .btnToggle .mq-math-mode{ font-size: 50%; }  .alphaCommonTogglePadClass{ display: inline-block; width: 100%; overflow: auto; white-space: nowrap; margin:0px auto;  }  .btnKeyStrokes {  background-color: #000000; border-style: solid; border-width: 0.5px; border-color: #b3b3b3; border-radius: 5px; color: white; text-align: center; text-decoration: none; display: inline-block; float: right; cursor: pointer; height: 30px; width: 9%; margin: 0.5%; }  /*.btnKeyStrokes .spanSpc{ font-size: 40px; transform: scaleY(0.25); font-weight: 20px; margin-bottom: -90% }*/  .btnKeyStrokes .spanSpc { font-size: 90%; display:inline-block; -webkit-transform:scale(2,1); /* Safari and Chrome */ -moz-transform:scale(2,1); /* Firefox */ -ms-transform:scale(2,1); /* IE 9 */ -o-transform:scale(2,1); /* Opera */ transform:scale(2,1); /* W3C */ position: relative; bottom: 5px; }  #SolutionAndStepsDivID{  padding-top: 10px; padding-bottom: 10px; border-style: none; border-color: black; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 10px; background-color: #606060; }  #finalSolutionBoxID {  background-color: #ffffff; /*#4d4d4d*/ width: 97%; padding: 0px; padding-left: 3px; border-radius: 5px; margin-bottom: 20px; margin-left: 0.75%; margin-right: 0.75%; }  #stepBoxID {  background-color: #ffffff; /*#4d4d4d*/ border-style: none; width: 97%; border-radius: 5px; padding-left: 3px; margin-bottom: 20px; margin-left:1%; margin-right: 1%; }  #likeAndShareBoxID { position: relative; background-color: #ffffff; /*#4d4d4d*/ width: 97%; height: 50px; border-radius: 5px; margin-left: 1%; margin-bottom: 10px; margin-right: 1%; }  #printSolutionBtnID, #printSolutionPDFBtnID, #emailSolutionBtnID, #verifySolutionBtnID {  /*position: relative;*/ background-color: #fff; /*#4d4d4d*/ border:none; border-style: none; border-color: none; padding: 5px; margin: 2.5px 10px 2.5px 0; width: 45px; height: 45px; }  #fbShareLogoContainerID {  /*position: relative;*/ background-color: #fff; /*#4d4d4d*/ border:none; border-style: none; border-color: none; padding: 1.5px; margin: 0 10px 0 0; width: 50px; height: 20px;  }  #fbShareLogoContainerID .fb-like{ padding: 0 0 1px 0; }  #fbShareLogoContainerID .fb-share-button{ padding: 1px 0 0 0; }  #printSolutionBtnID .tooltipPrint, #printSolutionPDFBtnID .tooltipPrintPDF, #emailSolutionBtnID .tooltipEmail, #verifySolutionBtnID .tooltipVerify { visibility: hidden; width: 45px; background-color: #606060; color: #fff; text-align: center; border-radius: 6px; padding: 1px 0; position: absolute; left: 0px; opacity: 0; transition: opacity 0.3s; }  #printSolutionBtnID .tooltipPrint, #printSolutionPDFBtnID .tooltipPrintPDF, #emailSolutionBtnID .tooltipEmail { top:-18px; }  #verifySolutionBtnID .tooltipVerify { top:-33px; }  #printSolutionBtnID .tooltipPrint::after, #printSolutionPDFBtnID .tooltipPrintPDF::after, #emailSolutionBtnID .tooltipEmail::after, #verifySolutionBtnID .tooltipVerify::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }  #printSolutionBtnID:hover .tooltipPrint, #printSolutionPDFBtnID:hover .tooltipPrintPDF, #emailSolutionBtnID:hover .tooltipEmail, #verifySolutionBtnID:hover .tooltipVerify { visibility: visible; opacity: 1; }  #emailDetailsID{ position: absolute; top: -108px; left: 95px; /*z-index: 999;*/ background-color: #000; width: 166px; height: 108px; border-radius: 5px; }  #feedbackDetailsID{ position: absolute; top: -212px; left: 140px; /*z-index: 999;*/ background-color: #000; width: 332px; height: 208px; padding: 2px; border-radius: 5px; }  #emailID, #nameID, #feedbackEmailID, #feedbackNameID { width: 150px; height: 20px; margin:5px; }  #feedbackID { width: 315px; height: 120px; margin:5px; }  #emailSubmitID, #emailFormCloseID, #feedbackSubmitID, #feedbackFormCloseID{ width: 70px; margin: 5px; height: 20px; }  .exampleProblemsClass {  padding-top: 20px; border-width: 30px 10px; border-color: #606060; border-style: solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }  .examplesBtnClass { border: none; width: 100%; background-color: #fff; text-align: left; }  tbody{ width: 100%; display: table; font-size: 16px; }  td span{ cursor: pointer; } p{ word-wrap: break-word; white-space: normal; font-size: 20px; } .subStepClickButtonClass{ font-size: 12px; outline: none; } span{ display:inline-block; word-wrap: break-word; word-break: break-all; }  .SocialMediaDivClass{ margin-top: 10px; margin-bottom: 50px; float: left; width: 99.5%; border: solid; border-width: 1px; border-color: #606060; border-radius: 5px; }  .SocialMediaPageLikes{ font-size: 15px; float: left; width: 100%; }  .SocialMediaLikesSpan{ margin: 5px; height: 20px; float: left; }  .HowtoUseAppVideo{ display: inline-block; float: left; margin: 0% 5% 0% 7.5%; padding: 0%; width: 25%; position: absolute; z-index: 0; }  .videoContainer { position: relative; padding-bottom: 60%; height: 0; overflow: hidden; }  .videoContainer iframe, .videoContainer object, .videoContainer embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  .footer { background-color: #000000; /*#4d4d4d*/ border: none; width: 100%; height: 40px; margin: 30px 0 0 0; padding: 0%; color: white; bottom: 0; overflow: auto; position: fixed; bottom: 0; white-space: nowrap; }  .footer div, .footer a{ display: inline-block; color: white; text-align: center; padding: 5px; text-decoration: none; margin-top: 6px; }  .footer a:hover { background-color: #777; }  nav ul { margin: 0; padding: 0; list-style: none; position: relative; float: right; background: #eee; border-bottom: 0px solid #fff; border-radius: 3px; }  nav li { float: left; margin: 0; padding: 0; }  nav #login { border-right: 0px solid #ddd; box-shadow: 0px 0 0 #fff; height: 25px; }  nav #login-trigger { display: inline-block; *display: inline; *zoom: 1; height: 25px; line-height: 25px; font-weight: bold; padding: 0px; text-decoration: none; color: #444; text-shadow: 0 0px 0 #fff; border-radius: 3px 0 0 3px; }  nav #login-trigger:hover, nav #login .active { background: #606060; }  .closeBtnClass{ position: absolute; top: 0px; right: 0px; z-index: 9999; background-color: #606060; color:#fff; }  nav #login-content, nav #signup-content, nav #loggedon-content { display: none; position: absolute; top: 24px; right: 0; z-index: 9999; opacity: 1; background: #fff; background-image: linear-gradient(top, #fff, #eee); padding: 5px; box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); border-radius: 3px 0 3px 3px; font-size: 15px }  nav li #login-content, nav li #signup-content, nav li #loggedon-content { right: 0; width: 250px; background-color: #606060; color: #fff; z-index: 9999; }  nav li #login-content #inputs, #actions, nav li #signup-content #inputsNewUser, #actionsNewUser, nav li #loggedon-content #UserData, #actionsUserdata { border-radius: 3px; }  nav li #login-content #inputs input, nav li #signup-content #inputsNewUser input, nav li #loggedon-content #UserData div, nav li #loggedon-content #UserData a { background: #f1f1f1; padding: 6px 5px; margin: 0 0 10px 0; width: 206px; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 1px #ccc inset; color: #000; }  #inputs #loginHeader, #inputsNewUser #signUpHeader{ text-align: center; font-size: 15px; font-weight: bold; }  #inputs input:focus, #inputsNewUser input:focus { background-color: #fff; border-color: #e8c291; outline: none; box-shadow: 0 0 0 1px #e8c291 inset; }  #actions { font-size: 15px; }  #actions button, #actionsNewUser button, #newUserBtn, #forgotPasswordBtn, #actionsUserdata button { background-color: #000; padding: 6px 5px; margin: 2px 0 5px 0; width: auto; height: 30px; font-size: 15px; color: #fff; border-radius: 3px; }  #pmFrom, #pmBody{ width: 75%; }  .loader { border: 5px solid #fff; border-radius: 50%; border-top: 5px solid #000; width: 30px; height: 30px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; margin: 0 auto; position: fixed; top: 40%; left: 50%; }  /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } transform: translateZ(0); }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } transform: translateZ(0); }   .msgBox { border-style: solid; border-width: 10px; width: 250px; min-height: 80px; border-radius: 10px; border-color: #000; background-color: #606060; z-index: 9999999999999999; opacity: 1; position: fixed; top: 40%; left: 20%; }  .msgBoxContent { color: #fff; background-color: #606060; display: inline-block; width: 80%; font-size: 15px; margin:5px; }  .msgBoxClose { border-radius: 15px; width:30px; height:30px; background-color: #fff; font-size: 20px; color: #000; display: inline-block; float: right; margin-top: 25px; margin-right: 10px; }  .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-top: none; z-index: 99; top: 62px; left: 0; width: 97%; }  .autocomplete-items div { padding: 3px; cursor: pointer; background-color: #fff; color: #000; font-size: 15px; border: none; }  .autocomplete-items div:hover { /*when hovering an item:*/ background-color: #e9e9e9; }  .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: DodgerBlue !important; color: #ffffff; }  @media screen and (max-width: 800px) { /*.dropdown { float: right; text-align: left;   width: 100%; padding: 0; margin: 0;}*/ .dropdown:hover .dropdown-content { display: inline-block; float: left; width: 100%;} .dropdown:hover .dropdown-content .MenuItems{ display: inline-block; float: left;} .mainContainer{ width: 100%; margin:0% ; padding: 0%;} .mainPracticeContainer{ width: 100%; margin:0% ; padding: 0%;} #prevBtnID, #nextBtnID { width: 10%; } #practiceDivContainer{ width: calc(80% - 18px); } #inout, #practiceQuestionBoxID { font-size: 15px; } p{ font-size: 15px; } .subStepClickButtonClass{ font-size: 12.5px; outline: none;}   .HowtoUseAppVideo{ float: left; margin: 0% 5% 0% 7.5%; padding: 0%; width: 37.5%; position: absolute; z-index: 0; } .videoContainer iframe, .videoContainer object, .videoContainer embed {width: 80%; height: 80%; margin: 0% 5% 0% 5%;}  #pmFrom, #pmBody{width: 100%;}  #printSolutionBtnID, #printSolutionPDFBtnID, #emailSolutionBtnID, #verifySolutionBtnID {margin: 2.5px 5px 2.5px 0;}  #fbShareLogoContainerID {margin: 0 5px 0 0;}  }  @media screen and (max-width: 400px) { #inout{ font-size: 12.5px; } p{ font-size: 12.5px; } .subStepClickButtonClass{ font-size: 9px; outline: none; } .button{ height: 45px;} .sideBar{ width: 100%; margin: 0 auto; padding: 5% 0% 0% 0%; text-align: center;} .videoContainer iframe, .videoContainer object, .videoContainer embed {width: 80%; height: 80%; margin: 0% 10% 0% 10%;} .msgBox {left: 10%;} .btnToggle .mq-math-mode{font-size: 30%;}  }  @media screen and (max-width: 600px) { #feedbackDetailsID{ left: 3px; } }  @media screen and (max-width: 800px) { .LogoContainerClass a:not(:first-child), .dropdown .dropbtn { display: none; } /*.LogoContainerClass a:not(:first-child), .dropdown:hover .dropdown-content { display: none; }*/ .LogoContainerClass a.icon { /*float: right;*/ position: absolute; right: 0px; top: 0px; margin: 10px 35px 10px 0%; color: white; display: inline-block; text-decoration: none; }  .LogoContainerClass a.icon:link {color:white;} .LogoContainerClass a.icon:visited {color:white;} .LogoContainerClass a.icon:hover {color:white;} .LogoContainerClass a.icon:active {color:white;} }  @media screen and (max-width: 800px) { .LogoContainerClass.responsive {position: relative;} .LogoContainerClass.responsive a.icon { position: absolute; right: 0px; top: 0px; color: white; margin: 10px 35px 10px 0%; display: inline-block; text-decoration: none; } .LogoContainerClass.responsive .icon:link {color:white;} .LogoContainerClass.responsive .icon:visited {color:white;} .LogoContainerClass.responsive .icon:hover {color:white;} .LogoContainerClass.responsive .icon:active {color:white;} .LogoContainerClass.responsive a {float: right; display: inline-block; text-align: right;} .LogoContainerClass.responsive .dropdown { margin-right: 30px; padding: 0% 0% 5px 0%; float: right; text-align: right; width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); }  .LogoContainerClass.responsive .dropdown-content {position: relative; overflow: hidden; float: right;} .LogoContainerClass.responsive .dropdown-content button {padding: 5px 5px; font-size: 15px; text-align: right;} .LogoContainerClass.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: right;} }