/*----------------------------------------
  UI - buttons
------------------------------------------*/

.ui-buttons .btn, .ui-buttons .btn-large, .ui-buttons .btn-small{
  margin: 10px 10px 0 0;
}
.ui-buttons .btn-floating{
  margin: 10px 30px 0 0;
}

/*----------------------------------------
  UI - badges & Waves
------------------------------------------*/
.ui-badges .badge{
  margin: 10px 10px 0 0;
  float: left;
}

.ui-wavesgrid img{
  vertical-align: top;
}
.ui-wavesgrid .col{
  margin-bottom: 15px;
}

/*----------------------------------------
  UI - Colors
------------------------------------------*/
.ui-colors{
  padding: 0 .75rem;
}
.ui-colors .col{
  margin: 0px 0 0px 0;
  /* border-bottom: 1px solid #e0e0e0; */
  padding: 0 0 20px 0;
}
.ui-colors .col .col{
  border: none;
  border-radius: var(--border-radius);
  /* margin: 5px; */
  min-height: 60px;
  /* min-width: 10px; */
  padding: 0;
  margin-left: -1px;
  width: 7.2%;
}
.ui-colors .col div{
  margin: 1px 0px 0 0;
}

/*----------------------------------------
  UI - Toasts
------------------------------------------*/
.ui-toasts .btn{
  margin: 10px 10px 0 0;
}
.toast.rounded{
  width: 96%;
  margin: 2% 2% 15px 2%;  
}

/*----------------------------------------
  UI - Modal
------------------------------------------*/
.ui-modal .btn{
  margin: 10px 10px 0 0;    
}

/*----------------------------------------
  UI - Grid
------------------------------------------*/
/* .ui-grid{
  border-right: 1px;
} */
.ui-grid .col{
  border-right: 3px solid rgba(255, 255, 255, 0.9);
  padding: 0;
  text-align: center;
  margin-bottom: 5px;
  background: rgba(var(--primary-rgb),0.2);
  color: var(--primary-color);
  box-shadow: none;
  border-radius: var(--border-radius);
  min-height: 40px;
}
.ui-grid .col .col-in{
  font-size: 14px;
    line-height: 26px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 5px;
    min-height: 40px;
}
/* .ui-grid .col:nth-child(odd){
    background: var(--primary-color);
} */

.ui-grid .col .col-in{
  display: block;
  /* padding: 7px 0; */
}

.ui-grid.ui-grid-large .col{
  min-height: 100px;
  height: 100px;
  position: relative;
}

.ui-grid-large .col .col-in{
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  font-size: 120%;
  left: 0;
}
.ui-grid-large .col .col-in p, .ui-grid-large .col .col-in div{
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
  width: 100%;        
}
/*----------------------------------------
  UI - Icons
------------------------------------------*/
.ui-icons.sizes i{
  line-height: 50px;
}
.ui-icons .iprev {
    height: 60px;
    text-align: left;
    margin-bottom: 1.5rem;
    position: relative;
}
.ui-icons .iprev div{
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,0.14), 0 3px 11px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.14), 0 3px 11px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    height: 100%;
    padding: 0px;
    border-radius: var(--border-radius);
}
.ui-icons .iprev i {
  font-size: 36px;
  margin-bottom: 15px;
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: var(--border-radius-50percent);
  float: left;
}
.ui-icons .iprev span {
  display: block;
  font-size: 14px;
  line-height: 23px;
  word-wrap: break-word;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  margin-left: 73px;
  /* float: left; */
  /* white-space: nowrap; */
  /* margin: 15px; */

}
.ui-icons .iprev code:before{
  content: "(";
}
.ui-icons .iprev code:after{
  content: ")";
}
.ui-icons .iprev code{
  display: none;
  font-size: 12px;
  line-height: 13px;
  word-wrap: break-word;
  float: right;
  white-space: nowrap;
  margin: 15px;
  opacity: 0.7;
  text-transform: uppercase;
  position: absolute;
  right: 1px;
  top: -7px;
}

/*----------------------------------------
  Form Select
------------------------------------------*/
.ui-select .input-field{
  margin-bottom: 30px;
}
nav.ui-forms label{
  top: -11px;
  left: 11px;
}
nav.ui-forms label.active{
  top: 20px;
}
nav.ui-forms label i{
  margin-left: 0px;
}

/*----------------------------------------
  Dropdowns
------------------------------------------*/
.ui-dropdowns .btn, .ui-dropdowns .btn-large{
  margin: 15px 15px 0 0;
}
.dropdown-trigger.btn-large{
  line-height: 36px;
}
.dropdown-trigger.btn{
  line-height: 30px;
}

/*----------------------------------------
  Mediabox
------------------------------------------*/

.ui-mediabox .col{
  margin-bottom: 24px;
}

/*----------------------------------------
  Feature Discovery
------------------------------------------*/
.tap-target{
  background-color: var(--primary-color);
}
.tap-wrap{
  margin-left: 25px;
}

/*----------------------------------------
  Faq
------------------------------------------*/
.ui-faq .collapsible-header{
  line-height: 25px;
}

/*----------------------------------------
About Sections
------------------------------------------*/

.home-mode{
  padding-bottom: 30px;
}

/*----------------------------------------
  Site - Dark Mode - UI Icons
----------------------------------------*/
[data-site_mode="dark"] .ui-icons .iprev div{
    background-color: #455A64;
}
[data-site_mode="dark"] .ui-grid .col{
  border-right: 2px solid #37474f;
  color: #eee;
}