/* GENERAL */

/* PALET COLORS */

:root {
  --iwColorDark: #2A3436;
  --iwColorDarkSecond: #3B4248;
  --iwColorLight: #FFFFFF;
  --iwColorLightSecond: rgba(0,0,0,0.1)/*#F9F9F9*/;
  --iwColorGreen: #0BDA51;
  --iwColorRed: #D14334;
  --iwColorBlue: #0073AA;
}


/* ICONS */
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');


@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(../fonts/materials.woff2) format('woff2');
  font-display: block;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 40px !important;
  padding: 0;
  margin: 0;
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 20;
}


/* COLUMN */

.iwColumn10, .iwColumn20,
.iwColumn25, .iwColumn33,
.iwColumn40, .iwColumn50,
.iwColumn60, .iwColumn66,
.iwColumn75, .iwColumn80,
.iwColumn90, .iwColumn95,
.iwColumn100{
  position: relative;
  display: inline-block;
}

.iwColumn10 *, .iwColumn20 *,
.iwColumn25 *, .iwColumn33 *,
.iwColumn40 *, .iwColumn50 *,
.iwColumn60 *, .iwColumn66 *,
.iwColumn75 *, .iwColumn80 *,
.iwColumn90 *, .iwColumn95 *,
.iwColumn100 *{
  max-width:100%;
}

.iwColumn10{ width:10% !important; }
.iwColumn20{ width:20% !important; }
.iwColumn25{ width:25% !important; }
.iwColumn33{ width:33% !important; }
.iwColumn40{ width:40% !important; }
.iwColumn50{ width:50% !important; }
.iwColumn60{ width:60% !important; }
.iwColumn66{ width:66% !important; }
.iwColumn75{ width:75% !important; }
.iwColumn80{ width:80% !important; }
.iwColumn90{ width:90% !important; }
.iwColumn95{ width:95% !important; }
.iwColumn100{ width:100% !important; }



@media (max-width: 900px) {
  .iwColumn10{ width:100% !important; }
  .iwColumn20{ width:100% !important; }
  .iwColumn25{ width:100% !important; }
  .iwColumn33{ width:100% !important; }
  .iwColumn40{ width:100% !important; }
  .iwColumn50{ width:100% !important; }
  .iwColumn60{ width:100% !important; }
  .iwColumn66{ width:100% !important; }
  .iwColumn75{ width:100% !important; }
  .iwColumn80{ width:100% !important; }
  .iwColumn90{ width:100% !important; }
  .iwColumn95{ width:100% !important; }
  .iwColumn100{ width:100% !important; }
}




/* WIDTH */

.iwWidth100{
  left:0;
  right:0;
  width:100%;
}

/* Max Width */
.iwMax50{ max-width:50px}
.iwMax100{ max-width:100px}
.iwMax150{ max-width:150px}
.iwMax200{ max-width:200px}
.iwMax300{ max-width:300px}
.iwMax400{ max-width:400px}
.iwMax500{ max-width:500px}
.iwMax600{ max-width:600px}
.iwMax700{ max-width:700px}
.iwMax800{ max-width:800px}
.iwMax900{ max-width:900px}
.iwMax1000{ max-width:1000px}

/* HEIGHT */

.iwHeight100{
  top:0;
  bottom:0;
  height:100%;
}


/* MARGIN */

.iwMargin0{ margin: 0 !important}
.iwMargin1{ margin: 0 1% }
.iwMargin2{ margin: 0 2% }
.iwMargin2-5{ margin: 0 2,5% }
.iwMargin4{ margin: 0 4%}
.iwMargin5{ margin: 0 5%}
.iwMargin10{ margin: 0 10%}
.iwMargin15{ margin: 0 15%}
.iwMargin20{ margin: 0 20%}
.iwMargin25{ margin: 0 25%}


.iwMarginS{ margin: 5px !important; box-sizing: border-box;}
.iwMarginM{ margin: 10px !important; box-sizing: border-box;}
.iwMarginL{ margin: 20px !important; box-sizing: border-box;}
.iwMarginXL{ margin: 30px !important; box-sizing: border-box;}
.iwMarginXXL{ margin: 50px !important; box-sizing: border-box;}

.iwMarginNotHeight{ 
  margin-top:0px !important;
  margin-bottom:0px !important; 
}
.iwMarginNotWidth{
  margin-left: 0px !important;
  margin-right: 0px !important;
}


/* PADDING */

.iwPadding0{ padding: 0 }
.iwPadding1{ padding: 0 1% }
.iwPadding2{ padding: 0 2% }
.iwPadding2-5{ margin: 0 2,5% }
.iwPadding4{ padding: 0 4%}
.iwPadding5{ padding: 0 5%}
.iwPadding10{ padding: 0 10%}
.iwPadding15{ padding: 0 15%}
.iwPadding20{ padding: 0 20%}
.iwPadding25{ padding: 0 25%}

.iwPaddingS{ padding: 5px !important; box-sizing: border-box;}
.iwPaddingM{ padding: 10px !important; box-sizing: border-box;}
.iwPaddingL{ padding: 20px !important; box-sizing: border-box;}
.iwPaddingXL{ padding: 30px !important; box-sizing: border-box;}
.iwPaddingXXL{ padding: 50px !important; box-sizing: border-box;}

.iwPaddingNotHeight{ 
  padding-top:0px !important;
  padding-bottom:0px !important; 
}
.iwPaddingNotWidth{
  padding-left: 0px !important;
  padding-right: 0px !important;
}


/* POSITION */

.iwTextAlignCenter{ text-align: center !important; }
.iwTextAlignRight{ text-align: right !important; }
.iwTextAlignLeft{ text-align: left !important; }

.iwFixed{position: fixed !important;}
.iwAbsolute{position: absolute !important;}
.iwRelative{position: relative !important;}
.iwSticky {position: sticky !important;}
.iwAlignCenter{ 
  margin: 0 auto;
  display:table;
}

.iwFloatLeft{ float:left !important; }
.iwFloatRight{ float:right !important; }

.iwDisplayInlBlock{ display: inline-block !important; }
.iwDisplayFlow{display: flow !important;}
.iwDisplayBlock{ display: block !important; }
.iwDisplayTable{ display: table !important; }
.iwDisplayFlex{ display:flex !important; }
.iwDisplayInlineFlex{ display:inline-flex !important; }

.iwDisplayFlexCenter{    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

.iwBoxSizing{ box-sizing: border-box !important;}

.principal{
  width:100%;
}


/* OVERFLOW */

.iwOverflowHidden{ overflow:hidden;}


/* SHOW */
.iwHide{display: none !important}
.iwShow{display: block !important}


/* BACKGROUND */

.iwBgLight{background: var(--iwColorLight) !important;}
.iwBgLightSecond{background: var(--iwColorLightSecond) !important;}
.iwBgDark{background: var(--iwColorDark) !important;}
.iwBgDarkSecond{background: var(--iwColorDarkSecond) !important;}
.iwBgGreen{background: var(--iwColorGreen) !important;}
.iwBgRed{background: var(--iwColorRed) !important;}
.iwBgBlue{background: var(--iwColorBlue) !important;}


/* TEXT COLOR */

.iwTextLight, .iwTextLight a{color: var(--iwColorLight) !important;}
.iwTextLightSecond, .iwTextLightSecond a{color: var(--iwColorLightSecond) !important;}
.iwTextDark, .iwTextDark a{color: var(--iwColorDark) !important;}
.iwTextDarkSecond, .iwTextDarkSecond a{color: var(--iwColorDarkSecond) !important;}
.iwTextGreen, .iwTextGreen a{color: var(--iwColorGreen) !important;}
.iwTextRed, .iwTextRed a{color: var(--iwColorRed) !important;}
.iwTextBlue, .iwTextBlue a{color: var(--iwColorBlue) !important;}

/* BORDER */

/* Color */
.iwBorderLight{border-color: var(--iwColorLight)!important;}
.iwBorderLightSecond{border-color: var(--iwColorLightSecond) !important;}
.iwBorderDark{border-color: var(--iwColorDark) !important;}
.iwBorderDarkSecond{border-color: var(--iwColorDarkSecond) !important;}
.iwBorderGreen{border-color: var(--iwColorGreen) !important;}
.iwBorderRed{border-color: var(--iwColorRed) !important;}
.iwBorderBlue{border-color: var(--iwColorBlue) !important;}

/* Tamaño */
.iwBorderSolid1{border:solid 1px}
.iwBorderSolid2{border:solid 2px}
.iwBorderSolid3{border:solid 3px}

/* Radius */
.iwBorderRadius3{border-radius:3px}
.iwBorderRadius6{border-radius:6px}
.iwBorderRadius10{border-radius:10px}


/* SHADOW */
.iwShadowLLight{box-shadow: 0 0 50px 1px var(--iwColorLightSecond);}
.iwShadowLDark{box-shadow: 0 0 50px 1px var(--iwColorDarkSecond);}



/* EFFECT */
.iwCursorPointer{
  cursor:pointer;
}

/* FONT */

/*Size*/
.iwFontSizeS{ font-size: 13px  !important}
.iwFontSizeM{ font-size: 15px !important}
.iwFontSizeL{ font-size: 18px !important}
.iwFontSizeXL{ font-size: 25px !important}
.iwFontSizeXXL{ font-size: 40px !important}
.iwFontSizeXXXL{ font-size: 80px !important}

/*Weight*/
.iwFontWeightThink{font-weight:300}
.iwFontWeightBold{font-weight:800}


/* TEXT */

.iwText p, .iwText h1, .iwText h2, .iwText h3, .iwText h4, .iwText h5, .iwText h6,
.iwText div, .iwText span, .iwText section, .iwText pre, .iwText code{
  width:100%;}

.iwText *{
  float:none !important; 
  display:inline-block;
}

.iwText pre, .iwText code{
  display: block;           
  width: 100%;              
  box-sizing: border-box;   
  white-space: pre-wrap;    
  word-wrap: break-word;         
  float: none;    
}
.iwText pre{ padding:0; }
.iwText code{ padding-right: 100px; }
.iwText table, .iwText .iwTableBox{ margin:20px 0; }


/* LIST */

.iwlistBox, .iwlistBox ul, .iwText ul{
  list-style:circle;
  padding: 5px 0 0 20px;
  width:100%;
  margin-bottom: 10px;
  box-sizing: border-box; 
}

.iwlistBox.noneList{
  list-style:none;
}

.iwlistBox li, .iwText li{
  padding: 2.5px 0;
  width:100%;
  float:none !important;
  box-sizing: border-box; 
  display: list-item;
}


/* BUTTON */

.iwBt{
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-sizing: border-box
}

/* Type */

.iwBt.icon{
  position:relative;
  padding:15px;
  margin-top: 3px;
  cursor: pointer;
}

.iwBt.icon:before{
    top: 7px;
    right: 6px;
    font-size:18px;

}

.iwBt.icon.dashicons{ 
  width:auto !important;
  height:auto !important;
}



/* Size */

.iwBt.small{
  padding:7px 10px;
  border-radius:3px;
  font-size:12px;
}

.iwBt.medium{
  padding:10px 15px;
  border-radius:5px;
  font-size:15px;
}

.iwBt.big{
  padding:15px 30px;
  border-radius:7px;
  font-size:20px;
}

/* Color */

.iwBt.light{
  background: var(--iwColorLight);
  color: var(--iwColorDark);
}

.iwBt.dark{
  background: var(--iwColorDark);
  color: var(--iwColorLight);
}
.iwBt.blue{
  background: var(--iwColorBlue);
  color: var(--iwColorLight);
}

.iwBt.red{
  background: var(--iwColorRed);
  color: var(--iwColorLight);
}


/*Toggle Button*/

.iwToggleBt {
  position: relative !important;
  display: inline-block;
  margin:0 !important;
  aspect-ratio: 2/1;
}

.iwToggleBt input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.iwToggleBt .iwToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:0;
  border-radius: 5em;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.iwToggleBt .iwToggleSlider:before {
  position: absolute;
  content: "";
  aspect-ratio: 1/1;
  height: 80%;
  top: 10%;
  bottom:10%;
  right: 10%;
  left: 10%;
  margin:0 !important;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
}

.iwToggleBt input:checked + .iwToggleSlider {
  background-color: var(--iwColorGreen);
}

.iwToggleBt input:checked + .iwToggleSlider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

/* SIMPLE BOX */

.iwSimpleBox{
  border-radius:5px;
  padding: 30px; 
  box-sizing: border-box;
}

.iwSimpleBox.light{
  background:var(--iwColorLight);
  color:var(--iwColorDark);
  border: 1px solid var(--iwColorLightSecond);
  
}

.iwSimpleBox.dark{
  background:var(--iwColorDark);
  color:var(--iwColorLight);;
}

/* TABLE */

.iwTableBox {
  display: table !important;
  margin-top:5px;
  padding: 0;
  width: 100%;
  float: none !important;
  box-sizing: border-box;
  word-break: break-word;
}

.iwTableEqualColumns{table-layout: fixed;}

.iwTableBox *{
  float: none;
}

.iwTableBox > *{
  display: table-cell !important;
  vertical-align: middle;
  padding: 5px;
  box-sizing: border-box;
}

.iwTableBoxRow {
  display: table-row !important;
  box-sizing: border-box;
}

.iwTableBoxCell {
  display: table-cell !important;
  box-sizing: border-box;
}

.iwTableBoxRow > * {
  display:table-cell;
  vertical-align: middle;
  padding: 5px;
}


@media (max-width: 900px) {

.iwTableBox {
  display: inline-block !important;
}

.iwTableBox > *{
  display: inline-block !important;
}

.iwTableBoxRow {
  display: inline-block !important;
}

.iwTableBoxCell {
  display: inline-block !important;
}

.iwTableBoxRow > * {
  display:inline-block !important;
}


}

/* Apperiance Table */

.iwTableAlignTop .tableBoxRow > * {
  vertical-align: top;
}

/* Theme Simple */

.iwTableBox.ThemeSimple,
.iwTableBox.ThemeSimple > .iwTableBoxRow > * {
  background:var(--iwColorLight);
  color:var(--iwColorDark);
  border: solid 1px var(--iwColorDark);
}

.iwTableBox.ThemeSimple > .iwTableBoxRow.rowHead > * {
  background:var(--iwColorDark);
  color:var(--iwColorLight);
  font-weight:800;
}

.iwTableBox.ThemeSimple > .iwTableBoxRow.rowFoot > * {
  background:var(--iwColorLightSecond);
  color:var(--iwColorDark);
  border: solid 1px var(--iwColorDark);
  font-weight:800;
}


/* Theme Dark */

.iwTableBox.ThemeDark {
  overflow: hidden;
  border-radius: 10px;
  /*box-shadow: 0 0 0 2px var(--iwColorDark);*/
}

.iwTableBox.ThemeDark,
.iwTableBox.ThemeDark > .iwTableBoxRow {
  background:var(--iwColorDarkSecond);
}

.iwTableBox.ThemeDark > .iwTableBoxRow > * {
  color:#fff;
  padding:15px;
}

.iwTableBox.ThemeDark > .tableBoxRow:nth-child(even) {
  background:var(--iwColorDark);
}

.iwTableBox.ThemeDark > .iwTableBoxRow.rowHead > * {
  background:var(--iwColorDark);
  color:var(--iwColorLight);
  font-weight:800;
  border-bottom: solid 2px #ccc;
}


.iwTableBox.ThemeDark > .iwTableBoxRow.rowFoot > * {
  background:var(--iwColorDark);
  color:var(--iwColorLight);
  border-top: solid 2px #333e42;
  font-weight:800;
}

/* Theme Light */

.iwTableBox.ThemeLight {
  overflow: hidden;
  border-radius: 10px;
  /*box-shadow: 0 0 0 2px var(--iwColorDark);*/
}

.iwTableBox.ThemeLight,
.iwTableBox.ThemeLight > .iwTableBoxRow {
  background:var(--iwColorLight);
}

.iwTableBox.ThemeLight > .iwTableBoxRow > * {
  color:var(--iwColorDark);
  padding:15px;
}

.iwTableBox.ThemeLight > .iwTableBoxRow:nth-child(even) {
  background:var(--iwColorLightSecond);
}

.iwTableBox.ThemeLight > .iwTableBoxRow.rowHead > * {
  background:var(--iwColorLight);
  color:var(--iwColorDark);
  font-weight:800;
  border-bottom: solid 2px var(--iwColorDark);
}

.iwTableBox.ThemeLight > .iwTableBoxRow.rowFoot > * {
  background:var(--iwColorLightSecond);
  color:var(--iwColorDark);
  border-top: solid 2px var(--iwColorDark);
  font-weight:800;
}


/* SLIDE BOX */
.iwSlideBox.Int,
.iwSlideBox.Ext span{
  width: 90%;
  padding: 20px 5%;
  margin: 5px 0;
  border: 1px solid #eee;
  box-shadow: 0 1px 1px #ccc;
  border-radius: 3px;
  background: #fff !important;  
}

.iwSlideBoxlb,
.iwSlideBox label{
  margin:15px 5px 0 5px;
  font-size:15px;
  cursor:pointer;
}

.iwSlideBox.icon label:before{
  font-family: dashicons;
  display: inline-block;
  line-height: 1;
  font-weight: 400;
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: top;
  text-align: center;
  content: "\f10f";
  margin:0 5px
}

.iwSlideBox>input, .iwSlideBox .iwSlideBoxContent{display:none;}

.iwSlideBox>input:checked + .iwSlideBoxContent{
  display:table;
}

.iwSlideBox p{
  margin:15px;
  font-size:14px !important
}

/* BAR */

/* Sidebar */

.iwSideBar{
    overflow: auto;
    text-align: left;
    background: #fff;
    box-shadow: 0 2px 2px #dcdcde;
}

/* Right */
.iwSideBar.right{
  right: 0;
  direction: rtl;
}

.iwSideBar.right *{
  direction: ltr;
}

.iwSideBar.right .iwExitPopup{
    top: 60px;
    right: 30px;
    position: fixed;
    z-index:100;
}

/* Left */
.iwSideBar.left{
  left: 0;
}

/* POPUP */

.iwPopup{
  position:fixed;
  z-index: 1000;}

input.iwInpPopup{ display: none;}

.iwPopup>input:checked ~ .iwPopupMain{ display:block; }


.iwPopupMain{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #0000007a;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.iwPopupContent{
  display:flex;
  align-items: center;
  min-height:100%;
}

.iwPopupMain .iwExitPopup{
  top: 10px;
  right: 10px;
  position: absolute;
  z-index:100;
  padding-top: 10px;
}

/*TABS*/
.iwInpTab, .iwTab{ 
  display:none !important; 
}

input.iwInpTab:checked ~ div.iwTab{
  display: block !important;
}


/*PRELOADER*/

.iwPreloader{
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display:block;
}

.iwPreloader>div{
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: table;
}

.iwPreloader.transparent>div{background:none;}
.iwPreloader.dark>div{background:var(--iwColorDark);}
.iwPreloader.light>div{background: var(--iwColorLight);}

.iwPreloader>div>div{
  display: table-cell;
  vertical-align: middle;
}

.iwEffect {
  display: table;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  z-index:1;
}

.iwEffect div {
  position: absolute;
  border: 4px solid #333;
  opacity: 1;
  border-radius: 50%;
  animation: iwEffect 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.iwPreloader.lightEf .iwEffect div{border: 4px solid var(--iwColorLight);}
.iwPreloader.darkEf .iwEffect div{border: 4px solid var(--iwColorDark);}

.iwEffect div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes iwEffect {

  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }

  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }

  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }

}
