@import "lib.less";

.left { float: left; display: inline; }
.right { float: right; display: inline; }


/*=====================================================================================
  Reset
=======================================================================================*/
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, date, tr, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
a, ins, del { text-decoration: none; }
blockquote, q { quotes:none; }
ul { list-style: none; }
ol { padding-left: 20px; }
table { border-spacing: 0; border-collapse: collapse; }
caption, th { text-align: left; }
blockquote:before, blockquote:after, q:after, q:before { content: ''; }
/*=====================================================================================
  Basic Styles
=======================================================================================*/
html { height: 100%; }
body { background: @bg; color: @basic; font-family: @fontstack; font-size: 16px; -webkit-font-smoothing: antialiased; }
hr { display: none; }
b, strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
address, cite, dfn { font-style: normal; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
img { vertical-align: middle; }
a, a:visited { color: @link; text-decoration: underline; }
a:active { color: @link; outline: 0; text-decoration: underline; }
a:hover { color: darken(@link, 15%); }
input { font-family: @fontstack; }
code {background: #f5f4f4; padding: 0.3em;}


/*=====================================================================================
  Layout
=======================================================================================*/
header[role="header"] {
    .box;
    min-height: 88px;
    padding: 0 30px;
    width: 100%;

	.scl();
}
header[role="header"] .site-name img {
  margin-top: -8px;
  margin-left: -20px;
  margin-right: 12px;
}

#intro {}
#wrapper {
    display: flex;
    align-items: stretch;

	.sidebar {
        background: @bg2;
        .box();

        @media (min-width: @screen-md) {
            flex: none;
        }

		&.sleft {
            width: 220px; padding-left: 30px; padding-right: 15px;
            .bs(inset -1px 0 2px rgba(0,0,0,0.2));
        }
		&.sright {
            width: 330px;
            .bs(inset 1px 0 2px rgba(0,0,0,0.2));
        }
	}

	#main {
        padding: 30px 0;
        flex: auto;
    }

    @media (max-width: (@screen-xs - 1)) { /* very small screen */
        flex-direction: column;

        #main {
            order: 1;
        }
        .sidebar {
            order: 2;

            &.sleft,
            &.sright {
                width: auto;
            }
        }
    }

    @media (min-width: @screen-xs) and (max-width: (@screen-md - 1)) { /* tablets */
        flex-wrap: wrap;

        #main {
            order: 1;
        }
        .sidebar {
            order: 2;
            flex: auto;
            margin-left: 15px;
            margin-right: 15px;
        }
    }
}


/*=====================================================================================
  HEADER
=======================================================================================*/
header[role="header"] {
    .vg(@green, darken(@green, 5%));
    .bs(~'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1)');
    z-index: 5;

	.site-name {
        /* text-transform: uppercase; */
        margin-top: 20px;
		a { font-size: 34px; font-weight: bold; color: @bg; text-decoration: none;
			span { color: @accent2; font-weight: 300; }
 		}
 		small { display: block; font-size: 13px; color: @bg; }
		img { margin-top: -6px; margin-left: -20px; margin-right: 10px; }
    }
    .link {
        margin-top: 30px;
        a {margin-right: 10px; display: inline-block; color: #fff; font-size: 12px; text-align: center; text-decoration: none;}
        img {width: 20px;}
        .link-title {display: inline; line-height: 20px; vertical-align: middle; margin-left: 5px;}
    }
    @media (max-width: @screen-sm) {
        .link {
            display: flex;
            margin-left: -10px;
            margin-right: -10px;
            margin-bottom: 10px;
            a { width: 33%; margin-right: unset; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
            .link-title {margin-top: 5px;}
        }
        .site-name {
            small {font-size: 10px;}
        }
    }
    .dark-img {
        filter: brightness(2);
    }

    .enterprise-button {
        border-radius: 8px;
        padding: 6px 16px;
        background: #FDFDFD;
        box-shadow: inset 0px -1px 0.5px rgba(14, 14, 44, 0.4);
        border: none;

        .link-title {text-transform: uppercase; font-size: 12px; font-family: 'Open Sans';letter-spacing: 0.04em;font-weight: 600;color: #3E3E3F;}
    }
}

/*=====================================================================================
  FOOTER
=======================================================================================*/
.content-footer {
	.scl();
}


/*=====================================================================================
  INTRO
=======================================================================================*/
#intro {
    background: darken(@green, 11%) url(../images/bg-grid.png) top left;
    min-height: 150px;
    color: @bg;

	.text {
        width: 80%;
        margin: 0 auto;
        .box;
        padding-top: 35px;
        padding-bottom: 35px;

        @media (min-width: @screen-sm) {
            padding-right: 300px;
            background: url(../images/media-server.png) bottom right no-repeat;
        }

	 	p { line-height: 28px; font-size: 20px; margin-bottom: 32px;
	 		&:last-child { margin-bottom: 0; }
			small { font-size: 16px; }
	 	}
    }

    form {
        margin-top: 40px;
        margin-bottom: 35px;

        input[type=search] {
            .x(300px, 36px);
            border: 1px solid darken(@green, 15%); .br(18px;); font-size: 12px; padding: 0 10px 0 40px; background: rgba(255,255,255,0.9) url(../images/ico-search.png) 15px 50% no-repeat;

            @media (max-width: (@screen-xs - 1)) { /* very small screen */
                max-width: 80%;
            }

		  .bs(0 1px 1px rgba(255,255,255,0.3));
		  -webkit-appearance: none; -moz-appearance: none; appearance: none;
		  &:focus, &:active { background-color: #fff; outline: none; }
		}
	}

}

/*=====================================================================================
  MAIN
=======================================================================================*/
#main {
	.item {
        border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 40px;
        padding: 0 40px 40px 40px;

        @media (max-width: (@screen-xs - 1)) { /* very small screen */
            padding: 0 15px 15px 15px;
        }
        @media (min-width: @screen-xs) and (max-width: (@screen-md - 1)) { /* tablets */
            padding: 0 25px 25px 25px;
        }

		header {
            margin-bottom: 20px; position: relative;
			h2 { font-size: 36px; font-weight: 300; color: #000; }
			small { font-size: 13px; color: #8a948a;
				a { font-weight: bold; text-decoration: none; }
			}
			.options { position: absolute; right: 0; top: 0;
				ul { display: none; }
				.trigger { background: url(../images/ico-more.png) center center no-repeat; .x(44px); text-indent: -9999em; display: inline-block; .opacity(0.7); }
				&:hover {
					.trigger { .opacity(1); }
					ul.second-level { display: none; }
					ul.first-level { display: block; background: #fff; .br; .bs(0 5px 25px rgba(0,0,0,0.2)); position: absolute; right: -20px; top: 40px; /*border: 1px solid rgba(0,0,0,0.1);*/ padding: 10px 20px; min-width: 110px; line-height: 30px; font-size: 14px; font-weight: bold;
						&:before { content: ""; border: 8px solid transparent; .x(0px); border-bottom-color: #fff; position: absolute; top: -16px; right: 34px;  }
						li { position: relative;
							a { text-decoration: none; }
							&:hover {
								ul.second-level { display: block; background: #fff; .br; .bs(0 5px 25px rgba(0,0,0,0.2)); position: absolute; left: -160px; top: -10px; /*border: 1px solid rgba(0,0,0,0.1);*/ padding: 10px 20px; min-width: 110px; line-height: 30px; font-size: 14px; font-weight: bold;
									&:before { content: ""; border: 8px solid transparent; .x(0px); border-left-color: #fff; position: absolute; top: 16px; right: -16px; }
								}
							}
						}
					}
				}

			}
		}

		.body {
            line-height: 26px;
            margin: 1em;

            @media (max-width: (@screen-xs - 1)) { /* very small screen */
                margin: 0;
            }
            @media (min-width: @screen-xs) and (max-width: (@screen-md - 1)) { /* tablets */
                margin: .5em;
            }

            pre {
                max-width: 100%;
                overflow-x: auto;
                position: relative;
                white-space: pre-wrap;
            }

            p { margin-top: 20px; margin-bottom: 20px; margin-right: 10px; }
            ul { text-align: left; width: 95%; margin-left: 2em; margin-top: 0.6em; margin-bottom: 0.6em; list-style: circle; }

            h1, h2, h3, h4, h5, h6 {
                line-height: 1.25;
                padding-top: 0.75em;
                padding-bottom: 0.1em;

                &:hover {
                    .header-anchor
                        .icon {
                            visibility: visible;
                        }
                }
            }
            h1 { font-size: 150%; padding-top: 1em; }
            h2 { font-size: 120%; padding-top: 1em; }
            .icon {
                vertical-align: middle;
                visibility: hidden;
                width: 16px;
                height: 16px;
            }
            .header-anchor {
                float: left;
                margin-left: -20px;
                padding-right: 4px;
            }

        }

    }

    .news {
        padding: 0 40px 20px 40px;

        @media (max-width: (@screen-xs - 1)) { /* very small screen */
            padding: 0 15px 15px 15px;
        }
        @media (min-width: @screen-xs) and (max-width: (@screen-md - 1)) { /* tablets */
            padding: 0 25px 25px 25px;
        }

        .news-item {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .news-hint {
                font-style: italic;
            }

            .news-img-container {
                height: 18px;
                width: 23px;
                margin-right: 10px;
                background: linear-gradient(#599059, #4f804f);
                display: flex;
                justify-content: center;

                img {
                    object-fit: contain;
                    height: 16px;
                    margin-top: -7px;
                }
            }

            .news-img {
                height: 18px;
                width: 23px;
                margin-right: 10px;
            }
        }
    }
}

/*=====================================================================================
  SIDEBARS
=======================================================================================*/
.sidebar {
    min-height: 100%;

	&.sleft { text-shadow: 0 1px 1px #fff; padding-top: 20px;
		ul { line-height: 40px; font-size: 16px; font-weight: bold; margin-bottom: 20px;
			li {
				a { text-decoration: none; }
			}
			&.buttons { margin-left: -15px;
				li { margin-bottom: 10px;
					a { .br; padding-left: 46px; color: #fff; display: block; line-height: 18px; padding: 10px 10px 10px 46px; text-shadow: 0 1px 1px rgba(0,0,0,0.3);
						&.rss { background: #fd9f13 url(../images/ico-rss.png) 12px 50% no-repeat; }
					}

                    .paypal { background: #006492 url(../images/ico-paypal.png) 12px 50% no-repeat; }
				}
			}
		}
	}
	&.sright { overflow: hidden;  text-shadow: 0 1px 1px #fff;
		.options { background: @bg; .x(100%, 88px); .bs(0 1px 2px rgba(0,0,0,0.2));
			.first {
				&:after { .cl; }
				li { float: left; width: 33%;
					&:nth-child(2n) { border: 1px solid rgba(0,0,0,0.1); border-width: 0 1px; }
					a { display: inline-block; .x(100%, 88px); .box; text-align: center; padding-top: 52px; font-size: 12px; text-decoration: none; color: @accent;
						&.close-all { background: url(../images/ico-close-all.png) 50% 24px no-repeat; }
						&.permaview { background: url(../images/ico-permaview.png) 50% 24px no-repeat; }
						&.more-options { background: url(../images/ico-more-options.png) 50% 24px no-repeat; }
						&:hover { color: @basic; }
					}
				}
			}
		}
		.tabs {
			.navigation { background: fadeout(@green, 90%); .x(100%, 50px); margin-bottom: 10px;
				&:after { .cl; }
				li { float: left;
					a { float: left; padding: 0 20px; font-size: 13px; font-weight: bold; text-decoration: none; line-height: 50px; .box; height: 50px;
						&.current { border-bottom: 4px solid @link; color: @basic; }
					}

                    span { color: #3e423e; float: left; padding: 0 20px; font-size: 13px; font-weight: bold; text-decoration: none; line-height: 50px; box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 50px; }
				}
			}
			.panes {
				.pane { padding: 0 20px;
					> ul { font-size: 12px; margin-bottom: 20px;
						> li { color: @accent; font-weight: bold;  line-height: 20px; text-transform: uppercase; margin-bottom: 5px; padding: 3px 0;
							ul { padding-left: 10px; font-size: 14px;
								li { line-height: 24px;  text-transform: none;
									a { text-decoration: none; font-weight: bold; }
								}
							}
						}
					}
				}
			}
		}
	}
}

.search-result div.r { margin-bottom: 1em; margin-right: 2em; }

div.footer {
    font-size: 90%;
    color: #888;
    text-align: center;
}

div.content-footer {
    margin-top: 1em;
    margin-bottom: 2em;
}

hr.footer-sep {
    margin-bottom: 20px;
    margin-top: 10px;
}

.trade {
    font-size: 65%;
    vertical-align: top;
}

.blog-iframe {
    width: 100%;
    height: 100%;
}

/*=====================================================================================
  XRAY MODAL
=======================================================================================*/
.hide {
  display: none;
}

.xray-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0,0,0,0.6);
  z-index: 1000;
}

.xray-modal-content {
  border-radius: 8px;
  max-width: 540px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  margin: 88px auto 60px auto;

  .header {
    border-radius: 0.3rem 0.3rem 0 0;
    height: 270px;
    background-image: url('../images/background.png');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    .header-icon {
      display: flex;
      align-items: center;

      .btn-violet {
        border: none;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        border-radius: 0.25rem;
        box-shadow: 0px 6px 2px -4px rgba(14, 14, 44, 0.1), inset 0px -1px 0px rgba(14, 14, 44, 0.4);
        background: #481AA5;
        color: #fff;
        padding: 10px;

        img {
          width: 14px;
          height: 14px;
        }
      }
    }

    .product-name {
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
      margin-left: 0.5rem;
    }

    .header-title {
      font-size: 1.5rem;
      margin-top: 1.5rem;
      line-height: 130%;
      max-width: 360px;
      font-weight: bold;
      text-align: center;
    }

    .btn-close {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 1.5rem;
      right: 1.5rem;
      cursor: pointer;
      box-shadow: -2px -4px 4px rgba(0, 0, 0, 0.1), 4px 6px 20px rgba(0, 0, 0, 0.15);
      padding: 18px;
      border-radius: .5rem;

      span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
      }
    }

    @media (max-width: 767px) {
      height: 14rem;

      .button-violet {
        img {
          width: 10px;
          height: 10px;
        }
      }

      .header-title {
        font-size: 1.125rem;
        max-width: 100%;
      }

      .btn-close {
        padding: 0.5rem;
      }
    }
  }

  .content {
    padding: 2.25rem 0 3.75rem 0;
    max-width: 360px;
    margin: 0 auto;

    .seperator {
      display: flex;
      justify-content: center;
      align-items: center;

      hr {
        width: 120px;
        margin: 0;
        display: block;
      }

      .seperator-text {
        margin-left: 2rem;
        margin-right: 2rem;
        color: #481AA5;
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
        text-transform: uppercase;
      }
    }

    .form-title {
      text-align: center;
      padding: 2.25rem 0;
      font-size: 1.6rem;
      font-weight: bold;
      .text-violet {
        color: #481AA5;
      }
    }

    .form-field-item {
      margin-bottom: 24px;
      display: flex;

      input {
        width: 100%;
        outline: none;
        border: 1px solid #f6f6f6;
        padding: 14px 24px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 140%;
        background: #f6f6f6;
        transition: all 0.2s ease;

        &:focus {
          background: #FFFFFF;
          border: 1px solid #1A48A5;
          box-shadow: 0px 4px 10px 3px rgba(0, 0, 0, 0.11);
        }
      }
    }

    .form-next-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 30px;
      border: none;
      outline: none;
      font-size: 18px;
      line-height: 180%;
      background: #481AA5;
      box-shadow: 0px 6px 2px -4px rgba(14, 14, 44, 0.1), inset 0px -1px 0px rgba(14, 14, 44, 0.4);
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
    }

    .btn-learn-more {
      font-size: 14px;
      color: #481AA5;
      margin-top: 12px;
      cursor: pointer;
      text-align: center;

      &:hover {
        text-decoration: underline;
      }
    }

    @media (max-width: 767px) {
      padding: 1.5rem 1.5rem 2.25rem 1.5rem;

      .form-title {
        padding: 1.5rem 0;
        font-size: 1.125rem;
        line-height: 150%;
      }

      form {
        input {
          padding: 1rem 1.5rem;
        }
      }
    }
  }
}

.xray-modal-content {
  @media (max-width: 767px) {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.xray-modal .xray-live-demo-link {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;

  .icon-pc-display-horizontal {
    background-color: currentColor;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    mask-image: url("../images/pc-display-horizontal.svg");
    -webkit-mask-image: url("../images/pc-display-horizontal.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #481aa5;
  }

  a {
    text-decoration: underline;
    text-transform: uppercase;
    color: #481aa5;
    font-weight: bold;
  }
}