@charset "UTF-8";

/* import font icon */

@import url('../dist/css/style.css');

/* import google font */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

/* normalize css */

html {line-height: 1.15;-webkit-text-size-adjust: 100%}/*** Remove the margin in all browsers.*/body {margin: 0}main {display: block}h1 {font-size: 2em;margin: 0.67em 0}/*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/hr {box-sizing: content-box;height: 0;overflow: visible}pre {font-family: monospace, monospace;font-size: 1em}/*** Remove the gray background on active links in IE 10.*/a {background-color: transparent}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted}b,strong {font-weight: 700er}code,kbd,samp {font-family: monospace, monospace;font-size: 1em}small {font-size: 80%}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline}sub {bottom: -0.25em}sup {top: -0.5em}/*** Remove the border on images inside links in IE 10.*/img {border-style: none}/*** 1. Change the font styles in all browsers.* 2. Remove the margin in Firefox and Safari.*/button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0}button,input {overflow: visible}button,select {text-transform: none}button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button}button: : -moz-focus-inner,[type="button"]: : -moz-focus-inner,[type="reset"]: : -moz-focus-inner,[type="submit"]: : -moz-focus-inner {border-style: none;padding: 0}button: -moz-focusring,[type="button"]: -moz-focusring,[type="reset"]: -moz-focusring,[type="submit"]: -moz-focusring {outline: 1px dotted ButtonText}fieldset {padding: 0.35em 0.75em 0.625em}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal}progress {vertical-align: baseline}textarea {overflow: auto}[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0}[type="number"]: : -webkit-inner-spin-button,[type="number"]: : -webkit-outer-spin-button {height: auto}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px}[type="search"]: : -webkit-search-decoration {-webkit-appearance: none}: : -webkit-file-upload-button {-webkit-appearance: button;font: inherit}/** Add the correct display in Edge, IE 10+, and Firefox.*/details {display: block}summary {display: list-item}/*** Add the correct display in IE 10+.*/template {display: none}[hidden] {display: none}input{outline: none;}

/* demo css */

body{
    background: #edf2f7;
    font-family: 'Open Sans Condensed', sans-serif;
}
.d_flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.mhl{
    flex-wrap: wrap;
}
.glyph {
    padding: 20px 15px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,.1);
    margin: 8px 1%;
    width: 31.333333333%;
    min-width: 500px;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 25% 25% 50%;
}
.pbs{
    grid-area: 1 / 1 / 4 / 2 ;
    font-size: 5em;
    text-align: center;
}
.icna{
    grid-area: 1 / 2 / 2 / 4 ;
}
.icco{
    grid-area: 2 / 2 / 3 / 4 ;
    border: none;
    padding: 0;
    margin: 0;
}
.iccode{
    grid-area: 3 / 2 / 4 / 4 ;
    position: relative;
    align-self: start;
    margin-top: 5px;
    width: 100%;
}
.otic{
    grid-area: 4 / 1 / 5 / 4 ;
    margin-top: 10px;
}
.icbu{
    grid-area: 5 / 1 / 6 / 2;
    font-size: 4em;
    align-self: center;
    justify-self: center;
    color: #5840bb;
}
.icbuco{
    grid-area: 5 / 2 / 6 / 4 ;
}
.otic .icotwr:first-child{
    margin-right: 15px;
}
.icotwr{
    width: 50%;
    align-items: center;
}
.icotwr i{
    font-size: 1.7em;
    display: block;
    margin-right: 5px;
    color: #5840BB;
}
.icsh{
    margin-top: 5px;
}
input:focus{
    border: 1px solid #130F26;
}
.iccode input,
.icco input{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
}
.icco input{
    max-width: 40%;
    margin: 10px 5px 0 0;
}
.iccode input{
    width: 100%;
    color: #8c899c;
    display: block;
    font-size: .9em;
}
.iccode .cpbtn{
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translate(0,-50%);
    background: #5840BB;
    color: #fff;
    padding: 3px 10px;
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
    font-size: .9em;
    opacity: 0;
    transition: all .3s ease;
}

.iccode .cpbtn:hover,
.iccode input:hover ~ .cpbtn{
    opacity: 1;
}
.showAlert.openAlert {
    position: fixed;
    top: 5%;
    right: 10%;
    width: 250px;
    background: #1fbd24;
    padding: 6px 25px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    border-radius: 8px;
    z-index: 9;
}
.header {
    background: url(3.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}
.header::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff33;
    z-index: 2;
}
.searchBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    min-width: 300px;
    z-index: 3;
}
.searchBox::after{
    content: "\e94b";
    font-family: 'iconly';
    font-weight: 200;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0,-50%);
    font-size: 1.6em;
    color: #5840BB;
}
.searchBox input{
    width: 100%;
    padding: 10px 25px;
    border-radius: 100px;
    font-size: 1.4em;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    box-sizing: border-box;
}
.designer {
    font-size: .9em;
    text-align: center;
    letter-spacing: 2px;
}
.menu {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    width: 50%;
    min-width: 300px;
    z-index: 3;
    background: #ffffffc9;
    margin: 0;
    padding: 20px;
    box-shadow: 0 15px 20px rgb(0 0 0 / 25%);
    border-radius: 0 0 10px 10px;
}
.menu li{
    list-style: none;
    margin-right: 25px;
}
.menu li a{
    font-weight: 700;
    color: #212121;
    font-size: 1.2em;
    text-decoration: none;
}
.center{
    background: #fff;
    width: 90%;
    max-width: 1100px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 6%);
    border-radius: 10px;
    margin: 0 auto;
    padding: 25px;
}
.cota{
    width: 100%;
    text-align: left;
    border-spacing: 0;
    border-collapse: collapse;
}
.cota th{
    color: #130F26;
}
.cota td,
.cota th{
    border: 1px solid #eee;
    padding: 8px;
}
.cota td:first-child{
    color: #5840bb;
}
xmp{
    background: #f6f6f6;
    padding: 25px;
    border-radius: 10px;
    white-space: normal;
}
.btnWrapper{
    justify-content: center;
    align-items: center;
    width: 50%;
}
.smpCode{
    width: 50%;
}
.smpCode xmp {
    white-space: pre-line;
}
.btn {
    padding: 10px 25px;
    background: #7966c9;
    color: #fff;
    font-size: 2em;
    border-radius: 10px;
    border-bottom: 5px solid #5840bb;
    cursor: pointer;
    transition: all .1s ease;
}
.btn:active{
    border-bottom: 1px solid #5840bb;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}