@import "uikit.min.css";
@import "uikit-rtl.min.css";
@import "../../css/font.css";

@import "mobile.css";
@import "slider.css";
@import "formula.css";
@import "theme.css";
@import "animation.css";
@import "bg.css";

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.boxAveChem > .chem_short {
  font-size: 5rem;
}
.boxAveChem > .chem_ave {
  font-size: 1rem;
}

.boxChemSqr > div > .chem_short {
  font-size: 1.5rem;
}
.boxChemSqr > div > .chem_number {
  font-size: 1rem;
}
.boxChemSqr > div > .chem_name {
  font-size: 0.6rem;
}

#calCopper .flex > div:last-child {
  font-size: 1.5rem;
}
#calCopper div.flex:last-child > div:last-child {
  font-size: 2rem;
}

.boxFormula.medium > div {
  font-size: 1rem !important;
}
.boxFormula.small > div {
  font-size: 0.85rem !important;
}
.boxFormula.smallest > div {
  font-size: 0.65rem !important;
}
.boxFormula.little > div {
  font-size: 0.6rem !important;
}

#page3_2 .boxFormula.smallest > div {
  font-size: 0.75rem !important;
}
#page3_4 .boxFormula.smallest > div {
  font-size: 0.75rem !important;
}
#page3_4 .afterO .boxFormula.smallest > div {
  font-size: 0.85rem !important;
}
#page4_2_1 .boxFormula.small > div {
  font-size: 0.75rem !important;
}
#page4_2_2 .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}
#page4_2_2 .boxFormula.small > div {
  font-size: 0.8rem !important;
}
#page4_2_3 .boxFormula.smallest > div {
  font-size: 0.75rem !important;
}
#page4_2_6 .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}
#page4_3 .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}
#page4_4 .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}

div[exam="test1_2"] .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}
div[exam="test1_3"] .boxFormula.small > div {
  font-size: 0.9rem !important;
}
div[exam="test1_3"] .boxFormula.smallest > div {
  font-size: 0.75rem !important;
}
div[exam="test1_4"] .boxFormula > div {
  font-size: 0.85rem !important;
}
div[exam="test1_7"] .boxFormula.small {
  width: 100%;
}
div[exam="test1_7"] .boxFormula.small > div {
  /* font-size: 0.8rem !important; */
}
div[exam="test1_7"] .boxFormula.small > div:first-child > .tablerow > div:first-child {
  width:68%
}
div[exam="test1_7"] .boxFormula.small > div:last-child > .tablerow > div:first-child {
  width:40%
}
div[exam="test1_7"] .boxFormula.small > div:last-child > .tablerow > div:nth-child(2) {
  width:10px
}
div[exam="test1_7"] .boxFormula.small > div:last-child > .tablerow > div:last-child {
  width:60%
}
@media only screen and (max-width: 768px) {
  div[exam="test1_7"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
}
@media only screen and (max-width: 414px) {
  div[exam="test1_7"] .boxFormula.small > div {
    font-size: 0.75rem !important;
  }
}

div[exam="test2_1"] .boxFormula.small > div {
  font-size: 0.75rem !important;
}
div[exam="test2_3"] .boxFormula.small > div {
  font-size: 0.75rem !important;
}
div[exam="test2_5"] .boxFormula.small > div {
  font-size: 0.9rem !important;
}
div[exam="test2_7"] .boxFormula.small > div {
  font-size: 0.85rem !important;
}
div[exam="test2_8"] .boxFormula.small > div {
  font-size: 0.8rem !important;
}
div[exam="test2_9"] .boxFormula.small > div {
  font-size: 0.7rem !important;
}
div[exam="test2_10"] .boxFormula.small > div {
  font-size: 0.7rem !important;
}
div[exam="test2_11"] .boxFormula.small > div {
  font-size: 0.95rem !important;
}
div[exam="test2_12"] .boxFormula.small > div {
  font-size: 0.8rem !important;
}
div[exam="test2_12"] .boxFormula.little > div {
  font-size: 0.59rem !important;
}

div[exam="test3_3"] .boxFormula.smallest > div {
  font-size: 0.75rem !important;
}
div[exam="test3_7"] .boxFormula.smallest > div {
  font-size: 0.89rem !important;
}
div[exam="test3_8"] .boxFormula.little > div {
  font-size: 0.57rem !important;
}
div[exam="test3_9"] .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}
div[exam="test3_10"] .boxFormula.little > div {
  font-size: 0.65rem !important;
}
div[exam="test3_11"] .boxFormula.little > div {
  font-size: 0.48rem !important;
}
div[exam="test3_12"] .boxFormula.smallest > div {
  font-size: 0.85rem !important;
}
div[exam="test3_13"] .boxFormula.small > div {
  font-size: 0.9rem !important;
}
div[exam="test3_13"] .boxFormula.smallest > div {
  font-size: 0.8rem !important;
}
div[exam="test3_14"] .boxFormula.smallest > div {
  font-size: 0.75rem !important;
}
div[exam="test3_15"] .boxFormula.smallest > div {
  font-size: 0.63rem !important;
}
div[exam="test3_15"] .boxFormula.little > div {
  font-size: 0.49rem !important;
}
div[exam="test3_16"] .boxFormula.small > div {
  font-size: 0.7rem !important;
}
div[exam="test3_16"] .boxFormula.small:nth-child(1) > div {
  font-size: 0.8rem !important;
}
div[exam="test3_18"] .boxFormula.small > div {
  font-size: 0.95rem !important;
}
/* div[exam="test3_21"] .boxFormula.small > div {
  font-size: 0.9rem !important;
} */
div[exam="test3_21"] .boxFormula.small > div { font-size: 0.8rem !important; }

@media only screen and (min-width: 415px) {
  .boxFormula.medium > div {
    font-size: 1rem !important;
  }
  .boxFormula.small > div {
    font-size: 1rem !important;
  }
  .boxFormula.smallest > div {
    font-size: 0.85rem !important;
  }
  .boxFormula.little > div {
    font-size: 0.7rem !important;
  }

  /* div[exam="test1_2"] .boxFormula.smallest > div,
  div[exam="test1_3"] .boxFormula.small > div,
  div[exam="test1_3"] .boxFormula.smallest > div,
  div[exam="test1_4"] .boxFormula > div,
  div[exam="test1_7"] .boxFormula.small > div,
  div[exam="test2_1"] .boxFormula.small > div,
  div[exam="test2_3"] .boxFormula.small > div,
  div[exam="test2_5"] .boxFormula.small > div,
  div[exam="test2_7"] .boxFormula.small > div,
  div[exam="test2_8"] .boxFormula.small > div,
  div[exam="test2_9"] .boxFormula.small > div,
  div[exam="test2_10"] .boxFormula.small > div,
  div[exam="test2_11"] .boxFormula.small > div,
  div[exam="test2_12"] .boxFormula.small > div,
  div[exam="test2_12"] .boxFormula.little > div {
    font-size: 1rem !important;
  } */
}
@media only screen and (min-width: 768px) {
  .boxFormula > div {
    font-size: 1rem !important;
  }
  .boxFormula.medium > div {
    font-size: 1rem !important;
  }
  .boxFormula.small > div {
    font-size: 1rem !important;
  }
  .boxFormula.smallest > div {
    font-size: 1rem !important;
  }
  .boxFormula.little > div {
    font-size: 1rem !important;
  }
}
@media only screen and (min-width: 414px) and (max-width: 499px) {
  .segment > li {
    width: 150px;
  }
}
@media only screen /*and (min-width: 375px)*/ and (max-width: 413px) {
  .segment > li {
    width: 150px;
  }
  .boxFormula > div {
    font-size: 0.9rem !important;
  }
  .boxFormula.medium > div {
    font-size: 0.8rem !important;
  }
  .boxFormula.small > div {
    font-size: 0.7rem !important;
  }
  .boxFormula.smallest > div {
    font-size: 0.6rem !important;
  }
  .boxFormula.little > div {
    font-size: 0.55rem !important;
  }

  #page3_2 .boxFormula.small > div {
    font-size: 0.75rem !important;
  }
  #page3_2 .boxFormula.smallest > div {
    font-size: 0.65rem !important;
  }
  #page3_4 .boxFormula.smallest > div {
    font-size: 0.65rem !important;
  }
  #page3_4 .afterO .boxFormula.smallest > div {
    font-size: 0.75rem !important;
  }
  #page4_2_1 .boxFormula.small > div {
    font-size: 0.65rem !important;
  }
  #page4_2_2 .boxFormula.small > div {
    font-size: 0.7rem !important;
  }
  #page4_2_6 .boxFormula.smallest > div {
    font-size: 0.7rem !important;
  }
  #page4_3 .boxFormula.smallest > div {
    font-size: 0.7rem !important;
  }
  #page4_4 .boxFormula.smallest > div {
    font-size: 0.7rem !important;
  }

  .compoundExam.tab2 .tablerow > div:nth-child(2n-1) > :first-child {
    font-size: 44px;
  }

  div[exam="test1_2"] .boxFormula.smallest > div {
    font-size: 0.7rem !important;
  }
  div[exam="test1_3"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
  div[exam="test1_3"] .boxFormula.smallest > div {
    font-size: 0.75rem !important;
  }
  div[exam="test1_4"] .boxFormula > div {
    font-size: 0.75rem !important;
  }
  div[exam="test1_6"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
  div[exam="test1_7"] .boxFormula.small > div {
    font-size: 0.65rem !important;
  }

  div[exam="test2_1"] .boxFormula.small > div {
    font-size: 0.68rem !important;
  }
  div[exam="test2_3"] .boxFormula.small > div {
    font-size: 0.7rem !important;
  }
  div[exam="test2_5"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
  div[exam="test2_6"] .boxFormula.small > div {
    font-size: 0.75rem !important;
  }
  div[exam="test2_7"] .boxFormula.small > div {
    font-size: 0.75rem !important;
  }
  div[exam="test2_8"] .boxFormula.small > div {
    font-size: 0.7rem !important;
  }
  div[exam="test2_9"] .boxFormula.small > div {
    font-size: 0.64rem !important;
  }
  div[exam="test2_10"] .boxFormula.small > div {
    font-size: 0.63rem !important;
  }
  div[exam="test2_11"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
  div[exam="test2_12"] .boxFormula.little > div {
    font-size: 0.52rem !important;
  }

  div[exam="test3_3"] .boxFormula.smallest > div {
    font-size: 0.68rem !important;
  }
  div[exam="test3_7"] .boxFormula.smallest > div {
    font-size: 0.8rem !important;
  }
  div[exam="test3_8"] .boxFormula.little > div {
    font-size: 0.5rem !important;
  }
  div[exam="test3_9"] .boxFormula.smallest > div {
    font-size: 0.7rem !important;
  }
  div[exam="test3_10"] .boxFormula.little > div {
    font-size: 0.58rem !important;
  }
  div[exam="test3_11"] .boxFormula.little > div {
    font-size: 0.42rem !important;
  }
  div[exam="test3_12"] .boxFormula.smallest > div {
    font-size: 0.75rem !important;
  }
  div[exam="test3_13"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
  div[exam="test3_13"] .boxFormula.smallest > div {
    font-size: 0.7rem !important;
  }
  div[exam="test3_14"] .boxFormula.smallest > div {
    font-size: 0.67rem !important;
  }
  div[exam="test3_14"] .boxFormula.little > div {
    font-size: 0.55rem !important;
  }
  div[exam="test3_15"] .boxFormula.smallest > div {
    font-size: 0.55rem !important;
  }
  div[exam="test3_15"] .boxFormula.little > div {
    font-size: 0.43rem !important;
  }
  div[exam="test3_16"] .boxFormula.small > div {
    font-size: 0.6rem !important;
  }
  div[exam="test3_16"] .boxFormula.small:nth-child(1) > div {
    font-size: 0.7rem !important;
  }
  div[exam="test3_18"] .boxFormula.small > div {
    font-size: 0.85rem !important;
  }
  div[exam="test3_21"] .boxFormula.small > div {
    font-size: 0.8rem !important;
  }
}
@media only screen and (max-width: 374px) {
  .boxFormula > div {
    font-size: 0.8rem !important;
  }
}
@media only screen and (min-width: 500px) {
  html {
    background-color: #f0f0f0;
  }
  p {
    font-size: 1rem !important;
  }
  p.summary {
    font-size: 1rem !important;
  }

  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.25rem;
  }
  h6 {
    font-size: 1rem;
  }

  .hideDesktop {
    display: none;
  }
  .hideMobile {
    display: block;
  }
  .boxFormula.hideDesktop {
    display: none !important;
  }
  .boxFormula.hideMobile {
    display: table !important;
  }

  .flex > div {
    margin: 0 4px !important;
    font-size: var(--font-size-main) !important;
  }

  .boxAveChem > .chem_ave {
    /* font-size: 1.2rem; */
  }
  .boxChemSqr > div > .chem_short {
    font-size: 2rem;
  }
  .boxChemSqr > div > .chem_number {
    font-size: 1rem;
  }
  .boxChemSqr > div > .chem_name {
    font-size: 0.75rem;
  }

  .footerTab .uk-tab > li a {
    font-size: var(--font-size-main);
  }

  /* ///////// page2_2 ///////// */
  .sliderMassMole .uk-card-body > p.big {
    font-size: 2.5rem !important;
  }
  #calcH2O .ChemH,
  #calcCaSO .ChemS {
    margin-right: calc(100px + 16px);
    margin-top: 16px;
  }
  #calcCaSO .ChemCa {
    margin-right: calc((100px * 2) + (16px * 2));
    margin-top: 16px;
  }
  #calcH2O > div:first-child > :last-child,
  #calcCaSO > div:first-child > :last-child {
    font-size: 3rem !important;
  }
  #calcH2O > div:last-child,
  #calcCaSO > div:last-child {
    height: 100px;
  }

  /* ///////// page2_3 ///////// */
  #page2_3 .sliderButton { margin-bottom: 16px; }
  .sliderButton .uk-slider-items > li .bt {
    font-size: 1.2rem;
  }
  #calVolumeGas > div > :first-child + * > * > * {
    line-height: 46px;
  }
  #calVolumeGas > div.flex > :first-child {
    /* margin-left: 50px !important; */
  }
  #calVolumeGas .lineCover {
    width: 50px;
  }
  #calVolumeGas #summaryVolumeGas,
  #calVolumeGas .summaryVolumeGas > div:nth-child(n + 2) {
    font-size: 1.7rem !important;
  }

  /* ///////// page2_4 ///////// */
  .segment > li {
    width: 200px;
  }

  /* ///////// page3_1 ///////// */
  #calCopper .flex {
    padding: 0 3rem;
  }
  #calCopper .flex > div {
    width: 50%;
  }
  /* #calCopper .flex > div:last-child {
        width: 7rem;
    } */
  #calCopper div.flex:last-child > div:last-child {
    padding: 12px 16px;
  }
  #calCopper .flex > div:last-child {
    font-size: 1.5rem !important;
  }
  #calCopper div.flex:last-child > div:last-child {
    font-size: rem !important;
  }

  /* ///////// page4_1_1 ///////// */

  .percentageTab {
    margin-left: unset;
    position: relative;
    width: calc(var(--container-width) + var(--magin-2lr));
  }

  /* ///////// page4_3 ///////// */
  #concentrateMole .tablerow > :nth-child(1) {
    width: 60px;
  }
  #concentrateMole .tablerow > :nth-child(2) {
    width: 40px;
  }

  /* ///////// page4_4 ///////// */
  .boilingVar.boxFormula > .table {
    margin: 0 0 0 8rem !important;
    width: calc(100% - 8rem);
  }
  #boilingVar > .table {
    margin: 0 0 0 3rem !important;
    width: calc(100% - 3rem);
  }
  #boilingVar > .table > .tablerow > * {
    padding: 0 8px 8px 0;
  }

  #sliderBoilingPoint .uk-card-body > ul > li {
    font-size: 1.5rem;
  }

  /* ///////// exam ///////// */
  #examEuropium > .table:first-child .tablerow > div:first-child {
    width: 58%;
  }
  #examEuropium > .table:first-child .tablerow > div:nth-child(2) {
    width: 20px;
  }

  /* ///////// cover ///////// */

  #cover > .title > * {
    font-size: 5rem;
  }
  #cover > .title > *:last-child {
    font-size: 11rem;
    right: -82px;
  }
}

@media only screen and (max-width: 374px) {
  /* html { font-size: 16px !important; }
    p { font-size: 16px !important; }
    p.summary { font-size: 16px !important; } */

  .boxFormula.medium > div {
    font-size: calc(var(--font-size-main) - 0.25rem) !important;
  }
  .boxFormula.small > div {
    font-size: calc(var(--font-size-main) - 0.4rem) !important;
  }
}

@media only screen and (min-width: 1024px) {
  /* */
  .boxFormula.tab-3 .form_mass.flex > div:first-child {
    margin-left: 1.25rem !important;
  }
  .boxFormula.tab-2 .form_mass.flex > div:first-child {
    margin-left: 2.5rem !important;
  }
  .boxFormula.tab-1 .form_mass.flex > div:first-child {
    margin-left: 3.75rem !important;
  }
  .boxFormula.tab0 .form_mass.flex > div:first-child {
    margin-left: 4rem !important;
  }
  .boxFormula.tab1 .form_mass.flex > div:first-child {
    margin-left: 5.25rem !important;
  }
  .boxFormula.tab2 .form_mass.flex > div:first-child {
    margin-left: 6.5rem !important;
  }
  .boxFormula.tab3 .form_mass.flex > div:first-child {
    margin-left: 7.75rem !important;
  }
  .boxFormula.tab4 .form_mass.flex > div:first-child {
    margin-left: 9rem !important;
  }
  .boxFormula.tab5 .form_mass.flex > div:first-child {
    margin-left: 10.25rem !important;
  }
  .boxFormula.tab6 .form_mass.flex > div:first-child {
    margin-left: 11.5rem !important;
  }
  .boxFormula.tab7 .form_mass.flex > div:first-child {
    margin-left: 12.75rem !important;
  }
  .boxFormula.tab8 .form_mass.flex > div:first-child {
    margin-left: 14rem !important;
  }
  .boxFormula.tab9 .form_mass.flex > div:first-child {
    margin-left: 15.25rem !important;
  }
  .boxFormula.tab10 .form_mass.flex > div:first-child {
    margin-left: 16.5rem !important;
  }
  .boxFormula.tab11 .form_mass.flex > div:first-child {
    margin-left: 17.75rem !important;
  }
  .boxFormula.tab12 .form_mass.flex > div:first-child {
    margin-left: 19rem !important;
  }

  .boxFormula.medium > div,
  .boxFormula.medium > .flex > div {
    font-size: calc(var(--font-size-main)) !important;
  }
  .boxFormula.medium.tab-2 > .flex > div {
    font-size: calc(var(--font-size-main)) !important;
  }
  .boxFormula.medium.tab1 > .flex > div {
    font-size: calc(var(--font-size-main)) !important;
  }
  .boxFormula.small > div {
    font-size: calc(var(--font-size-main)) !important;
  }
}