/*
  Grep xchange to make color
  
  ex.
    white -> teal
    #fff -> 00B5AD
    fff -> 009A93
    %active_value% -> 00847E
*/

/*******************************
            Standard
*******************************/

/*--------------
    Colors
---------------*/

/*--- Light Colors  ---*/

.ui.menu .white.active.item,
.ui.white.menu .active.item {
  border-color: #fff !important;
  color: #fff !important;
}

/*--------------
 Inverted Colors
---------------*/

/*--- Inverted Colors  ---*/

.ui.inverted.white.menu {
  background-color: #fff;
}

.ui.inverted.white.pointing.menu .active.item:after {
  background-color: #fff;
}

/*-------------------
       Colors
--------------------*/

i.white.basic.icon {
  color: #fff !important;
}

/*-------------------
   Inverted Colors
--------------------*/

i.inverted.white.basic.icon {
  background-color: #fff !important;
  color: #FFFFFF !important;
}

/*-------------------
       Colors
--------------------*/

/*--- white ---*/

.ui.white.buttons .button,
.ui.white.button {
  background-color: #fff;
  color: #FFFFFF;
}

.ui.white.buttons .button:hover,
.ui.white.button:hover,
.ui.white.buttons .active.button,
.ui.white.button.active {
  background-color: #fff;
  color: #FFFFFF;
}

.ui.white.buttons .button:active,
.ui.white.button:active {
  background-color: #%active_value%;
  color: #FFFFFF;
}

/*******************************
            Header
*******************************/

/*-------------------
       Colors
--------------------*/

.ui.white.header {
  color: #fff !important;
}

.ui.white.dividing.header {
  border-bottom: 3px solid #fff;
}

/*-------------------
   Inverted Colors
--------------------*/

.ui.inverted.white.header {
  background-color: #fff !important;
  color: #FFFFFF !important;
}

/*******************************
             Icon
*******************************/

/*-------------------
       Colors
--------------------*/
i.white.icon {
  color: #fff !important;
}

/*-------------------
   Inverted Colors
--------------------*/

i.inverted.white.icon {
  background-color: #fff !important;
  color: #fff !important;
}

/*******************************
            Label
*******************************/

/*-------------------
       Colors
--------------------*/

/*--- white ---*/

.ui.white.labels .label,
.ui.white.label {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #FFFFFF !important;
}

.ui.labels .white.label:before,
.ui.white.labels .label:before,
.ui.white.label:before {
  background-color: #fff !important;
}

/* Hover */

a.ui.white.labels .label:hover,
.ui.white.labels a.label:hover,
a.ui.white.label:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #FFFFFF !important;
}

.ui.labels a.white.label:hover:before,
.ui.white.labels a.label:hover:before,
a.ui.white.label:hover:before {
  background-color: #fff !important;
}

/* Corner */

.ui.white.corner.label,
.ui.white.corner.label:hover {
  background-color: transparent !important;
}

/* Ribbon */

.ui.white.ribbon.label {
  border-color: #fff !important;
}

/*******************************
         Progress Bar
*******************************/

/*--------------
     Colors
---------------*/

.ui.white.progress .bar {
  background-color: #fff;
}

/*******************************
            Segment
*******************************/

/*--------------
     Colors
---------------*/

.ui.white.segment {
  border-top: 0.2em solid #fff;
}

/*-------------------
   Inverted Colors
--------------------*/

.ui.inverted.white.segment {
  background-color: #fff !important;
  color: #FFFFFF !important;
}