/* Top appbar styling */
.appbar {
 background-color: white;
 border-bottom: 2px solid black;
}
#actual-appbar {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
}
.app-bar-menu {
 width: 100%;
}
.hamburger {
 border: 0px;
}
@media only screen and (min-width: 768px) {
 #actual-appbar {
 flex-direction: column;
 align-items: center;
 }
}
@media only screen and (min-width: 900px) {
 #actual-appbar {
 flex-direction: row;
 }
}
.encoding-table {
 align-self: center;
}
.encoding-table, .encoding-table> thead> tr> th {
 text-align: center !important;
 overflow-wrap: break-word;
}
.TTLV-encoding-heading::after {
 content: 'TTLV';
}
.XML-encoding-heading::after {
 content: 'XML';
}
.JSON-encoding-heading::after {
 content: 'JSON';
}
@media only screen and (min-width: 800px) {
 .TTLV-encoding-heading::after {
 content: 'TTLV Encoding / Decoding';
 }
 .XML-encoding-heading::after {
 content: 'XML Encoding / Decoding';
 }
 .JSON-encoding-heading::after {
 content: 'JSON Encoding / Decoding';
 }
}
thead {
 border-bottom: 0px !important;
}
/* Footer styling */
.footer-header {
 font-size: 14px !important;
 font-style: italic;
}
.footer-list {
 list-style-type: none;
 font-size: 13px;
 text-align: left;
 margin: 0px;
 padding-top: 3px;
}
.footer-list a:hover {
 background-color: rgba(29, 29, 29, 0.1) !important;
 cursor: pointer;
}
.footer-section {
 width: 260px;
}
.footer-section> div {
 width: fit-content;
 margin: 0 auto;
}
.footer-section> div> div {
 text-align: left;
}
.footer-section-small {
 padding-left: 30px;
 padding-bottom: 15px;
 padding-top: 15px;
 border-bottom: 1px solid rgba(29, 29, 29, 0.1);
}
.footer-section-small> div> div {
 text-align: left;
}
.footer-legal {
 padding-left: 10px;
 padding-top: 15px;
}
#page-footer {
 text-align: center;
 width: 100%;
 border-top: 2px solid black;
 position: relative;
 bottom: 0px;
 padding-top: 15px;
 padding-bottom: 15px;
}
#page-footer li {
 padding: 0px;
}
#page-footer .row> .footer-header {
 margin-top: 8px;
}
#page-footer a {
 color: black !important;
 text-decoration: none;
}
/* Main content styling */
.main-content {
 padding-top: 70px;
 height: 100%;
 overflow-y: auto;
}
#content-wrapper {
 min-height: calc(100% - 80px);
}
.header-center {
 text-align: center;
}
/* In-page nav menu styling */
nav {
 position: fixed;
 top: 200px;
 right: 0px;
 width: 150px;
 z-index: 1;
 background-color: #e0e0e0;
}
nav> ul {
 margin: 0;
 padding: 0;
 list-style: none;
 position: relative;
 display: block;
}
nav> ul> li {
 text-align: center;
}
nav> ul> li> a {
 padding: 10px 20px;
 display: block;
 color: black;
 text-decoration: none;
 transition: all 0.3s ease-in-out;
}
nav> ul> li> a:hover {
 text-decoration: none;
 color: white;
}
nav> ul> li:hover {
 background-color: #192129;
 color: white;
}
.active-menu {
 background-color: #192129;
}
.active-menu> a {
 color: white !important;
}
.nav-menu> li> a {
 color: black;
}
.nav-menu> li> a:hover {
 text-decoration: none;
 color: inherit;
}
/* Page sections */
section {
 width: 100%;
 margin: 0px !important;
 padding-top: 40px;
 padding-bottom: 20px;
 padding-right: 1%;
 padding-left: 1%;
}
.section-hr {
 width: 80%;
}
.product-text-section {
 flex-direction: column;
}
@media only screen and (min-width: 900px) {
 section {
 padding-top: 40px;
 padding-bottom: 40px;
 padding-left: 10%;
 padding-right: 10%;
 }
 .product-text-section {
 flex-direction: row;
 }
}
/* Those window sections lists used for product specs */
.multi-line-list {
 display: block;
}
.multi-line-list> li> span {
 display: inline-block;
 vertical-align: top;
}
.multi-line-list> li:before {
 content: '';
 display: inline-block;
 vertical-align: middle;
 height: 100%;
}
@media only screen and (max-width: 900px) {
 .product-specs-row {
 flex-direction: column;
 }
 .product-specs-cell {
 max-width: 100% !important;
 }
}
/* cs logos/images */
@media only screen and (min-width: 768px) {
 #cs-logo-menu-div {
 padding-left: 30px;
 padding-right: 30px;
 width: auto !important;
 min-height: 0px !important;
 }
}
#cs-logo-menu-div {
 display: flex;
 justify-content: center;
 min-width: 0;
 width: calc(100% - 60px);
 text-align: center;
 min-height: 52px;
}
#cs-logo-menu-img {
 padding: 5px 0 6px 10px;
 object-fit: contain;
}
#cs-byline-img {
 width: 500px;
}
/* Colour styles */
.bg-cryptsoft-blue {
 background-color: #568cca;
}
.fg-cryptsoft-blue {
 color: #568cca;
}
/* Custom appbar menu stuff */
.menu-category {
 padding-left: 15px !important;
}
/* Customer grid */
.customer-grid-cell {
 margin: 1%;
}
@media only screen and (min-width: 1500px) {
 .customer-grid-cell {
 margin: 15px;
 }
}
/* Announcements page formatting */
.announcements-list-text {
 padding: 20px 20px 20px 20px;
 text-align: justify;
}
.announcements-title {
 text-align: start;
}
@media only screen and (min-width: 900px) {
 .announcements-list-text {
 padding: 0px 0px 0px 0px;
 text-align: start;
 }
}
/* Customers page formatting */
.customer-list-text {
 padding-top: 40px;
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
 border-left: 2px solid #f8f8f8;
 text-align: justify;
}
#customers-list-carousel-row {
 width: 90%;
}
.customers-carousel-image-cell {
 max-width: 20%;
 max-height: 150px;
 padding-left: 10px;
 padding-right: 10px;
}
.customers-carousel-image-cell img {
 /* Constrain the image size */
 max-height: 90px;
 max-width: 100%;
 
 /* Maintain aspect ratio while fitting in container */
 object-fit: contain;
 
 /* Center the image */
 display: block;
 margin: 0 auto;
}
#customers-nav-tag {
 width: 50px;
}
@media only screen and (min-width: 900px) {
 .customer-list-text {
 padding-top: 0px;
 padding-left: 50px;
 padding-right: 0px;
 padding-bottom: 0px;
 text-align: start;
 }
}
.customer-image-cell {
 padding-right: 20px;
}
/* Interop accordion */
.accordion> .frame.active> .heading {
 background-color: black;
 color: white;
}
/* Interop Dialogs */
.interop-dialog {
 min-width: 60%;
 min-height: 50%;
 max-width: 90%;
 max-height: 90%;
}
.interop-dialog-desc {
 padding: 3%;
}
.interop-dialog-image {
 padding-top: 4%;
}
@media only screen and (max-width: 900px) {
 .interop-dialog-image {
 min-height: 180px;
 min-width: 100%;
 }
 .interop-dialog-desc {
 font-size: 0.75rem;
 }
}
/* Interop grid */
.interop-grid-cell {
 margin: 15px;
 min-height: 150px;
 max-width: 23% !important;
 background-color: white;
}
@media only screen and (max-width: 900px) {
 .interop-grid-cell {
 max-width: 45% !important;
 }
}
.interop-thumb-text {
 font-weight: 400;
 font-size: 0.75rem;
 margin-top: auto;
 color: black;
}
.interop-thumb-image {
 margin-top: auto;
}
@media only screen and (max-width: 900px) {
 .interop-thumb-image {
 height: 60%;
 }
 .interop-thumb-text {
 height: 40%;
 }
}
/* Products page styling */
.product-ul> li,
.product-ul> li> ul> li {
 margin: 0;
 padding-left: 30px;
 list-style: none;
 background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='768' height='768' viewBox='0 0 768 768'%3E%3Cpath fill='black' d='M320 192l-45.28 45.28 146.72 146.72-146.72 146.72 45.28 45.28 192-192z'%3E%3C/path%3E%3C/svg%3E%0A");
 background-repeat: no-repeat;
 background-position: left top;
 background-size: 27px;
}
.product-ul> li> ul> li {
 margin-top: 10px;
 background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='768' height='768' viewBox='0 0 768 768'%3E%3Cpath fill='%23d5d5d5' d='M320 192l-45.28 45.28 146.72 146.72-146.72 146.72 45.28 45.28 192-192z'%3E%3C/path%3E%3C/svg%3E%0A");
 margin-bottom: 10px;
}
.product-ul> li> span {
 font-weight: bold;
}
.product-specs-header {
 color: #568cca;
 font-size: 20px;
 padding-left: 25px;
 padding-top: 20px;
}
.product-ul> li> p {
 margin: 0;
}
.product-intro-text-cell {
 text-align: justify;
}
@media only screen and (max-width: 900px) {
 .product-intro-text-cell,
 .product-key-features-panel {
 max-width: 100% !important;
 }
 .product-intro-text-cell {
 padding-bottom: 50px;
 }
}
@media only screen and (min-width: 900px) {
 .product-intro-text-cell {
 padding-right: 50px;
 text-align: start;
 }
}
/* About page styles*/
.about-row {
 margin-bottom: 15px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about-cell-1-left, .about-cell-2-right {
 width: 30%;
}
.about-cell-2-left, .about-cell-1-right {
 width: 70%;
}
.about-cell-1-right, .about-cell-2-right {
 border-left: 2px;
 border-style: solid;
 border-color: #e0e0e0;
}
.about-cell-1-right, .about-cell-1-left, .about-cell-2-right, .about-cell-2-left {
 margin-top: 10px;
 margin-bottom: 10px;
 padding-left: 40px;
}
.about-img-heading {
 position: absolute;
 top: 0px;
 left: 3%;
 font-style:italic;
 font-weight: bold;
 color: #A0A0A0;
}
.about-img {
 padding: 20px;
 height: 200px;
}
.about-img-cell {
 align-items: center;
 padding: 0px !important;
 max-width: 450px;
}
#about-img-whoarewe {
 object-fit: contain;
}
#about-img-whyuseus {
 padding: 20px;
 height: 200px;
 object-fit: contain;
}
#about-img-marketdominance {
 padding: 20px;
 height: 200px;
 object-fit: fill;
}
#about-img-customers {
 padding: 20px;
 height: 200px;
 object-fit: fill;
}
#about-img-license {
 padding: 20px;
 height: 200px;
 object-fit: fill;
}
.about-content {
 padding-top: 20px;
 padding-left: 10%;
}
.about-content> ul> li, .about-content> ul> li> ul> li {
 margin: 0;
 padding-left: 30px;
 list-style: none;
 background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='768' height='768' viewBox='0 0 768 768'%3E%3Cpath fill='black' d='M320 192l-45.28 45.28 146.72 146.72-146.72 146.72 45.28 45.28 192-192z'%3E%3C/path%3E%3C/svg%3E%0A");
 background-repeat: no-repeat;
 background-position: left top;
 background-size: 27px;
}
.about-content> ul> li> ul> li {
 background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='768' height='768' viewBox='0 0 768 768'%3E%3Cpath fill='%23d5d5d5' d='M320 192l-45.28 45.28 146.72 146.72-146.72 146.72 45.28 45.28 192-192z'%3E%3C/path%3E%3C/svg%3E%0A");
}
.list-2-columns {
 column-count: 2;
 column-gap: 70px;
}
.contact-us-row {
 padding: 25px;
 }
#about-img-generalcontact {
 padding: 20px;
 height: 200px;
 object-fit: contain;
}
#about-img-meetings {
 padding: 20px;
 height: 200px;
 object-fit: fill;
}
#about-img-details {
 content: url("../media/about/x.png");
 padding: 20px;
 height: 200px;
 object-fit: fill;
}
/* Contact page styles*/
.contact-form-panel {
 height: calc(100vh - 480px);
}
.prepend {
 width: 130px;
}
.solution-label {
 height: 34px;
 padding: 0.5rem 0.75rem;
}
.select-input {
 width: auto !important;
 margin-right: auto;
}
.placeholder {
 color: #666;
 opacity: 1;
 font: 14px/14px 'Arial', Helvetica, sans-serif;
}
input::placeholder {
 color: #666;
 opacity: 1;
 font: 14px/14px 'Arial', Helvetica, sans-serif;
}
.contact-header {
 font-size: xx-large;
 height: 200px;
 background-color: #f8f8f8;
 margin: 0;
 padding: 0;
}
.invalid-feedback {
 color: red !important;
}
/* Thanks page styles*/
.thanks-content {
 height: calc(100vh - 220px);
}
.thanks-header {
 font-size: xx-large;
 height: 100px;
 background-color: #f8f8f8;
 margin: 0;
 padding: 0;
 padding-top: 20px;
}
.thanks-text {
 font-size: large;
 height: 110px;
 background-color: #f8f8f8;
 margin: 0;
 padding: 0;
}
.thanks-checkmark {
 background-color: #f8f8f8;
 margin: 0;
 padding: 0;
 padding-top: 70px;
 font-size: xxx-large;
}
.thanks-button {
 background-color: #f8f8f8;
 margin: 0;
 padding: 0;
 padding-bottom: 100px;
}
/* Mobile Responsiveness Settings */
@media only screen and (min-width: 900px) {
 .nav-menu {
 display: block !important;
 }
}
.collapsed {
 display: none !important;
}
.nav-menu {
 display: none;
}
/* Partners page styles*/
.partners-title {
 border: none !important;
 padding-top: 3%;
}
.partners-grid-cell {
 margin: 15px;
 padding-top: 5%;
 background-color: white;
 max-width: 23%;
}
.partners-text {
 font-weight: 400;
 font-size: 16px;
 margin-bottom: auto;
 color: black;
 min-height: 30%;
}
.partner-org-text {
 padding-left: 50px;
 border-left: 2px solid #f8f8f8;
}
@media only screen and (max-width: 900px) {
 .partner-org-text {
 border: none;
 padding-left: 0px;
 padding-top: 30px;
 }
}
@media only screen and (max-width: 900px) {
 .partner-org-img {
 max-height: 90px;
 }
}
.partners-img {
 min-height: 70%;
}
/* Carousel formatting */
.slide {
 padding: 40px;
 padding: 40px;
 display: flex !important;
 align-items: center;
}
/* Testimonials formatting */
.testimonials-text-div {
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 10px;
 height: fit-content;
}
#home-testimonials-carousel> .carousel {
 height: fit-content !important;
}
#home-testimonials-carousel .slide {
 padding-top: 0px;
 padding-bottom: 0px;
}
#home-testimonials-carousel .carousel-switch-next, 
#home-testimonials-carousel .carousel-switch-prev {
 top: calc(50% - 12.5px);
}
/* Services page styles */
.services-subheading {
 font-style:italic;
 font-weight: bold;
 color: #A0A0A0;
}
.services-content> ul> li, .about-content> ul> li> ul> li {
 margin: 0;
 padding-left: 30px;
 list-style: none;
 background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='768' height='768' viewBox='0 0 768 768'%3E%3Cpath fill='black' d='M320 192l-45.28 45.28 146.72 146.72-146.72 146.72 45.28 45.28 192-192z'%3E%3C/path%3E%3C/svg%3E%0A");
 background-repeat: no-repeat;
 background-position: left top;
 background-size: 27px;
}
.services-content> ul> li> ul> li {
 background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='768' height='768' viewBox='0 0 768 768'%3E%3Cpath fill='%23d5d5d5' d='M320 192l-45.28 45.28 146.72 146.72-146.72 146.72 45.28 45.28 192-192z'%3E%3C/path%3E%3C/svg%3E%0A");
}</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.cryptsoft.com/css/cryptsoft.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://www.cryptsoft.com/css/cryptsoft.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>