/**
    GavotteUI
    
    Default stylesheet for GavotteUI. Reserves all id and class names prefixed
    with gui-.
    
    Colour sheet:
        Dark black                      #000
        Light black                     #333
        Input text over background      #777 over #eee
        Grayed text or background       #ccc
        Dark grayed text or background  #aaa
        Highlighted text                #fff
        
        Colour                          #23ac38
        Highlighted colour              #2acc42
        
    The body element should set the global font size using %. Elements within
    including the GavotteUI elements should use em font sizes.
    
    @issues
    -   Styling input/text fields directly in IE does not seem work properly.
        
    @tasks
    -   Breakdown stylesheet into modules.
        
    @notes
    -   Text ellipsis in items does not seem to work in MS IE 9+.
        
    @author     sungchul.lee@primoris.co.nz
    @signature  p#10ns2&*1:sha256:43:aac13d74f557198a2616a65b533ebbb0bc3b790e768
**/
.gui-label {
    color: #aaa;
    font-size: 0.7em;
    font-weight: bold;
    padding-left: 34px;
}

.gui-switches {
    color: #fa9c19;    
    font-size: 0.65em;
    
    font-weight: bold;
    
    padding-left: 8px;
    
    cursor: pointer;
    display: inline-block;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.gui-switches:hover {
    color: #333;
}

.gui-switches-block {
    background-color: #eee;
    border-color: #eee;
    color: #777;
    
    width: 80px;
    height: 20px;
    
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    outline: none;
    
    display: block;
    
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
    
    cursor: pointer;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.gui-switches-block:hover {
    background-color: #777;
    border-color: #777;
    color: #fff;
}

.gui-message {
    color: #777;
    
    font-size: 0.75em;
    font-weight: bold;
    
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}

.gui-subtitle {
    color: #333;
    
    font-size: 0.9em;
}

.gui-arrow-up {
    width: 0;
	height: 0;
    
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #eee;
    
    display: inline-block;
    cursor: pointer;
}
.gui-arrow-up:hover {
    border-bottom: 10px solid #777;
}

.gui-arrow-down {
    width: 0;
	height: 0;
    
    border-top: 10px solid #eee;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
    
    display: inline-block;
    cursor: pointer;
}
.gui-arrow-down:hover {
    border-top: 10px solid #777;
}

.gui-section-break {
    position: relative;
    
    left: 0px;
    right: 0px;
    height: 0px;
    
    border: 0;
    border-top-color: #fa9c19;    border-top-style: solid;
    border-top-width: 2px;
}

.gui-icon-selectall {
    background-color: #ccc;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
}
.gui-icon-x,
.gui-icon-minus {
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-origin: content-box;
    width: 12px;
    height: 12px;
    padding-top: 4px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    display: inline-block;
    cursor: pointer;
}
.gui-icon-selectall {
    background-color: #ccc;
}
.gui-icon-selectall:hover {
    background-color: #777;
}
.gui-icon-x {
    background-image: url(../../../views/shared/images/iconset/x_gray.svg);
}
.gui-icon-x:hover {
    background-image: url(../../../views/shared/images/iconset/x_dark.svg);
}
.gui-icon-minus {
    background-image: url(../../../views/shared/images/iconset/minus_gray.svg);
}
.gui-icon-minus:hover {
    background-image: url(../../../views/shared/images/iconset/minus_dark.svg);
}

.gui-menu-category {
    color: #333;
    font-size: 0.8em;
    font-weight: bold;
    
    margin-top: 30px;
    margin-left: 2px;
    margin-bottom: 4px;
}

.gui-menu {
    color: #777;
    font-size: 0.9em;
    /* font-weight: bold; */
    
    padding-top: 8px;
    padding-left: 20px;
    padding-right: 10px;
    padding-bottom: 8px;
    
    /* margin-left: 2px; */
    margin-right: 34px;
    
    border: 0;
    /*
    border-left-color: #fff;
    border-left-width: 4px;
    border-left-style: solid;
    */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s;
}
.gui-menu:hover {
    background-color: #777;
    color: #fff;
    text-align: right;
    -webkit-animation: gui-menu-click 0.5s;
    animation: gui-menu-click 0.5s;
}
.gui-menu.gui-selected {
    background-color: #fa9c19;    color: #fff;
    text-align: right;
}
.gui-menu.gui-selected:hover {
    background-color: #FFBC23;
}
@-webkit-keyframes gui-menu-click {
    0% {
        padding-right: 10px;
    }
    50% {
        padding-right: 20px;
    }
    100% {
        padding-right: 10px;
    }
}

.gui-container {
    padding-right: 32px;
    
    border: 0;
    border-right-style: solid;
    border-right-color: #777;
    border-right-width: 8px;
    
    -moz-border-radius-topright: 24px; -webkit-border-top-right-radius: 24px; -khtml-border-top-right-radius: 24px; border-top-right-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
}
.gui-subset {
    position: relative;
    margin-left: 50px;
    
    border: 0;
    
    width: auto;
    height: auto;
    
    display: block;
}

.gui-action-tag {
    background-color: #777;
    color: #eee;
    
    font-weight: bold;
    font-size: 0.8em;
    text-decoration: none;
    
    padding-top: 9px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 9px;
    
    margin-left: 20px;
    margin-bottom: 10px;
    width: auto;
    
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
    float: left;
    clear: both;
    
    -webkit-transition: margin 0.2s;
    -moz-transition: margin 0.2s;
    -o-transition: margin 0.2s;
    transition: margin 0.2s;
    
    -webkit-border-top-left-radius: 24px;
    -khtml-border-top-left-radius: 24px;
    -moz-border-radius-topleft: 24px;
    border-top-left-radius: 24px;
    
    -webkit-border-bottom-right-radius: 24px;
    -khtml-border-bottom-right-radius: 24px;
    -moz-border-radius-bottomright: 24px;
    border-bottom-right-radius: 24px;
    
    border-right-color: #fa9c19;    border-right-style: solid;
    border-right-width: 4px;
}
.gui-action-tag:before {
    position: absolute;
    content: '';
    background-color: #777;
    width: 10px;
    height: 10px;
    left: 0px;
    margin-top: 15px;
}
.gui-action-tag:hover {
    margin-left: 10px;
    border-right: none;
    border-left-color: #777;
    border-left-style: solid;
    border-left-width: 4px;
    background-color: #fa9c19;}

.gui-clickable {
    color: #777;
    
    font-weight: bold;
    font-size: 0.8em;
    text-decoration: none;
    
    padding-bottom: 2px;
    
    display: inline-block;
    
    border: 0;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #fff;
    
    cursor: pointer;
}
.gui-clickable:hover {
    color: #333;
    text-shadow: 0 0 1px #aaa;
    border-bottom-color: #eee;
}

.gui-keywords {
    position: relative;
    border: 0;
    border-top-color: #eee;
    position: absolute;
    border-top-width: 2px;
    border-top-style: solid;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 4px;
    min-height: 34px;
    height: auto;
}
.gui-keyword {
    position: relative;
    float: left;
    font-size: 0.8em;
    
    color: #aaa;
    cursor: pointer;
    
    width: auto;
    height: 17px;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    padding-top: 1px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 1px;
    
    margin-top: 2px;
    
    display: inline-block;
}
.gui-keyword:hover {
    /*
        height: 34px;
        font-size: 1.0em;
    */
    color: #fa9c19;}

.gui-stem {
    background-color: #eee;
    opacity: 0.5;
    width: 10px;
}
.gui-stem-cover {
    background-color: #fff;
}

.gui-stage {
    position: relative;
    display: inline-block;
    
    color: #ccc;
    
    border: 0;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #fa9c19;    padding-top: 7px;
    padding-left: 20px;
    padding-right: 20px;
    
    width: auto;
    height: 20px;
    
    font-size: 0.8em;
    
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    
    z-index: 1000;
}
.gui-stage:hover {
    cursor: pointer;
    color: #777;
    text-shadow: 0 0 1px #aaa;
}
.gui-stage.gui-selected {
    color: #fa9c19;    font-weight: bold;
}
.gui-stage.gui-selected:hover {
    cursor: pointer;
    color: #fa9c19;    text-shadow: 0 0 0px #aaa;
}

/* enumerated info styling */
.gui-info-title {
    position: relative;
    font-weight: normal;
    font-size: 1.0em;
    color: #000;
    display: block;
    padding-top: 20px;
    padding-bottom: 4px;
}
.gui-info-block {
    position: relative;
    width: 300px;
    height: 300px;
    display: inline-block;
    float: left;
    
    background-color: rgba(240,240,240,0.2);
    margin-right: 30px;
    margin-bottom: 40px;
    border-bottom-color: #777;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    -moz-border-radius-bottomleft: 24px; -webkit-border-bottom-left-radius: 24px; -khtml-border-bottom-left-radius: 24px; border-bottom-left-radius: 24px;
}
.gui-info-block:hover {
    background-color: #eee;
}
.gui-info-block-bubble {
    position: absolute;
    right: 130px;
    top: 304px;
    
    width: 0;
	height: 0;
    
    border-top: 20px solid #777;
    border-left: 20px solid transparent;
	border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    
    display: block;
}
.gui-info-band {
    position: absolute;
    left: 0px;
    bottom: 0px;
    
    width: 0;
	height: 0;
    
    border-top: 15px solid transparent;
	border-left: 15px solid #777;
	border-right: 15px solid transparent;
    
    display: block;
}
.gui-info-subtitle {
    position: relative;
    font-size: 0.9em;
    width: 100%;
    background-color: #777;
    color: #eee;
    display: block;
    border: 0;
    border-top-width: 2px;
    border-top-color: #eee;
    border-top-style: solid;
    padding-top: 8px;
    padding-left: 20px;
    padding-bottom: 8px;
}
.gui-info-block .gui-info-subtitle {
    position: relative;
    font-size: 0.9em;
    width: 280px;
    background-color: #777;
    color: #eee;
    display: block;
    border: 0;
    border-top-width: 2px;
    border-top-color: #eee;
    border-top-style: solid;
    padding-top: 8px;
    padding-left: 20px;
    padding-bottom: 8px;
}
.gui-info-subtitle:hover {
    cursor: pointer;
    background-color: #333;
}
.gui-info-group {
    position: relative;
    padding-top: 10px;
    padding-left: 30px;
    display: block;
}
.gui-info-block .gui-info-group {
    position: relative;
    width: 270px;
    height: 253px;
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
}
.gui-info-block .gui-info-group::-webkit-scrollbar {
    width: 5px;
}
.gui-info-block .gui-info-group::-webkit-scrollbar-track {
    background: #eee;
}
.gui-info-block .gui-info-group::-webkit-scrollbar-thumb {
    background: #777; 
}
.gui-info-node {
    position: relative;
    font-size: 0.8em;
    min-width: 150px;
    margin-right: 30px;
    color: #fa9c19;    display: inline-block;
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}
.gui-info-block .gui-info-node {
    position: relative;
    font-size: 0.8em;
    width: 100%;
    height: auto;
    min-height: 40px;
    color: #fa9c19;    display: block;
}
.gui-info-node em {
    position: relative;
    font-size: 0.9em;
    font-weight: bold;
    font-style: normal;
    color: #aaa;
    padding-right: 30px;
    display: block;
    line-height: 0.7em;
}
.gui-info-node strong {
    position: relative;
    font-size: 1.4em;
    color: #333;
    display: inline-block;
}
.gui-info-section {
    position: relative;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
    padding-bottom: 20px;
}
.gui-info-section-title {
    position: relative;
    font-size: 0.9em;
    font-weight: bold;
    font-style: italic;
    color: #333;
    display: block;
}

/* input field */
.gui-input {
    background-color: #eee;
    border-color: #eee;
    color: #777;
    
    width: 160px;
    height: 20px;
    
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    
    font-size: 0.8em;
    text-decoration: none;
    text-align: right;
    outline: none;
    
    display: block;
    
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
}
.gui-input:hover {
    background-color: #777;
    border-color: #777;
    color: #fff;
}
.gui-input:focus {
    text-align: left;
    
    -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px;
    -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; -khtml-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 24px; -webkit-border-top-right-radius: 24px; -khtml-border-top-right-radius: 24px; border-top-right-radius: 24px;
    -moz-border-radius-bottomleft: 24px; -webkit-border-bottom-left-radius: 24px; -khtml-border-bottom-left-radius: 24px; border-bottom-left-radius: 24px;
}

/* textarea field. roughly equivalent to input */
.gui-textarea {
    background-color: #eee;
    border-color: #eee;
    color: #777;
    
    width: 160px;
    height: 160px;
    
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    
    font-size: 0.8em;
    font-weight: normal;
    text-decoration: none;
    text-align: right;
    line-height: 1.6em;
    outline: none;
    resize: none;
    
    display: block;
    
    overflow: hidden;
    
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
}
.gui-textarea:hover {
    background-color: #777;
    border-color: #777;
    color: #fff;
}
.gui-textarea:focus {
    text-align: left;
    
    -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px;
    -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; -khtml-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 24px; -webkit-border-top-right-radius: 24px; -khtml-border-top-right-radius: 24px; border-top-right-radius: 24px;
    -moz-border-radius-bottomleft: 24px; -webkit-border-bottom-left-radius: 24px; -khtml-border-bottom-left-radius: 24px; border-bottom-left-radius: 24px;
}

/* list of items */
.gui-list {
    background-color: #eee;
    
    width: 160px;
    height: auto;
    
    overflow-y: scroll;
    overflow-x: hidden;
    cursor: default;
    
    border: 0;
    border-top-color: #777;
    border-top-style: dashed;
    border-top-width: 2px;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    
    position: relative;
}
.gui-list::-webkit-scrollbar {
    width: 5px;
}
.gui-list::-webkit-scrollbar-track {
    background: #eee;
}
.gui-list::-webkit-scrollbar-thumb {
    background: #777; 
}

/* vertical tab style */
.gui-vertical-tab {
    position: relative;
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
    padding-left: 0px;
    width: calc(100%);
    border-bottom: solid 2px #fff;
    background-color: #fa9c19;    color: #fff;
}
.gui-vertical-tab.gui-closed {
    border-bottom: solid 2px #fff;
    background-color: grey;
    color: #fff;
}
.gui-vertical-tab:not(.gui-closed):not(.gui-disabled) {
    border-bottom-left-radius: 8px;
    box-shadow:
        0px -4px 0px -1px rgba(255,255,255,0.3) inset,
        0px -2px 0px -1px rgba(0,0,0,0.2) inset
    ;
}
.gui-vertical-tab:hover {
    background-color: #FFBC23;
}
.gui-vertical-tab.gui-disabled {
    background-color: #eee;
    color: #ccc;
}
.gui-vertical-tab::before {
    position: relative;
    content: '';
    background-size: 15px 10px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center center;
    width: 22px;
    height: 15px;
    padding-top: 14px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 11px;
    display: inline-block;
    vertical-align: top;
    pointer-events: none;
    background-image: url(../../../views/shared/images/iconset/chevron-bottom_white.svg);
}
.gui-vertical-tab.gui-closed::before {
    background-size: 10px 15px;
    width: 15px;
    height: 22px;
    padding-top: 9px;
    padding-left: 8px;
    padding-right: 7px;
    padding-bottom: 9px;
    background-image: url(../../../views/shared/images/iconset/chevron-right_white.svg);
}
.gui-vertical-tab.gui-disabled::before {
    background-image: url(../../../views/shared/images/iconset/chevron-bottom.svg);
    opacity: 0.3;
}
.gui-vertical-tab.gui-disabled.gui-closed::before {
    background-image: url(../../../views/shared/images/iconset/chevron-right.svg);
    opacity: 0.3;
}
.gui-vertical-tab .gui-vertical-tab-label-expanded,
.gui-vertical-tab .gui-vertical-tab-label {
    position: relative;
    display: none;
    font-weight: bold;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
    vertical-align: top;
    margin-left: -3px;
}
.gui-vertical-tab:not(.gui-closed) .gui-vertical-tab-label-expanded,
.gui-vertical-tab.gui-closed .gui-vertical-tab-label {
    display: inline-block;
}

.gui-vertical-tab .gui-inline-loader {
    position: relative;
    display: none;
    margin: 0;
    margin-top: 18px;
    margin-left: 30px;
    vertical-align: top;
}
.gui-vertical-tab.gui-loading .gui-inline-loader {
    display: inline-block;
}

/* tabs of items */
.gui-tabs {
    width: auto;
    height: 34px;
    overflow: hidden;
}

/* table of items */
.gui-table-container {
    background-color: #eee;
    
    width: 160px;
    height: auto;
    
    overflow-y: scroll;
    overflow-x: hidden;
    cursor: default;
    
    border: 0;
    border-top-color: #777;
    border-top-style: dashed;
    border-top-width: 2px;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    
    position: relative;
    
    display: block;
}
.gui-table-container::-webkit-scrollbar {
    width: 5px;
}
.gui-table-container::-webkit-scrollbar-track {
    background: #eee;
}
.gui-table-container::-webkit-scrollbar-thumb {
    background: #777;
}
.gui-table-container > table {
    width: 100%;
    
    border: 0;
    border-collapse: separate;
    border-spacing: 0px 0px;
    
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #777;
}

/* forrest of items */
.gui-forrest {
    background-color: #fff;
    
    width: 160px;
    height: auto;
    
    overflow-y: scroll;
    overflow-x: hidden;
    cursor: default;
    
    border: 0;
    border-top-color: #777;
    border-top-style: dashed;
    border-top-width: 2px;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    
    position: relative;
}
.gui-forrest::-webkit-scrollbar {
    width: 5px;
}
.gui-forrest::-webkit-scrollbar-track {
    background: #eee;
}
.gui-forrest::-webkit-scrollbar-thumb {
    background: #777; 
}

/* dropbox of items */
.gui-dropbox {
    background-color: #eee;
    border-color: #eee;
    
    width: 160px;
    height: 30px;
    
    position: relative;
    
    display: block;
    
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
}
.gui-dropbox.gui-selected {
    -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; -khtml-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
}
.gui-dropbox-indicator .gui-dropbox-selection::after {
    content: '';
    display: block;
    position: absolute;
    top: 14px;
    left: 19px;
    width: 0;
    height: 0;
    border-top: 6px solid #777;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.gui-dropbox-indicator .gui-dropbox-selection:hover::after {
    border-top: 6px solid #eee;
}
.gui-dropbox-selection {
    background-color: #eee;
    border-color: #eee;
    color: #777;
    
    cursor: pointer;
    
    font-size: 0.8em;
    text-align: right;
    
    position: absolute;
    cursor: pointer;
    
    top: -2px;
    left: -2px;
    right: -2px;
    height: 20px;
    
    padding-top: 7px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 3px;
    
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
    
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
}
.gui-dropbox-selection:hover {
    background-color: #777;
    border-color: #777;
    color: #fff;
}
.gui-selected .gui-dropbox-selection {
    -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; -khtml-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
}
.gui-dropbox-deselect {
    position: absolute;
    top: 6px;
    left: 13px;
}
.gui-dropbox-list {
    background-color: #eee;
    
    position: absolute;
    top: 32px;
    left: -2px;
    right: -2px;
    height: auto;
    z-index: 1000;
    
    overflow-y: scroll;
    overflow-x: hidden;
    
    border: 0;
    border-top-color: #777;
    border-top-style: dashed;
    border-top-width: 2px;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 4px;
}
.gui-dropbox-list::-webkit-scrollbar {
    width: 5px;
}
.gui-dropbox-list::-webkit-scrollbar-track {
    background: #eee;
}
.gui-dropbox-list::-webkit-scrollbar-thumb {
    background: #777; 
}

/* control panel */
.gui-panel {
    background-color: #777;
    color: #fff;
    
    position: absolute;
    
    left: 0px;
    width: 160px;
    height: 34px;
    
    border: 0;
    border-top-color: #eee;
    border-top-style: solid;
    border-top-width: 2px;
}
/* for firefox and ie compatibility */
.gui-panel-filter-wrapper {
    left: 0px;
    right: 48px;
    height: 34px;
    position: absolute;
}
.gui-panel-filter-wrapper.gui-panel-advanced {
    right: 104px;
}
.gui-panel-filter {
    /* alike gui-input */
    background-color: #777;
    color: #fff;
    
    width: 100%;
    height: 20px;
    
    padding-top: 7px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 7px;
    
    margin-left: 0px;
    
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    outline: none;
    
    position: absolute;
    overflow-y: hidden;
    
    border: 0;
    border-left-color: #777;
    border-left-style: solid;
    border-left-width: 4px;
    border-right-color: #eee;
    border-right-style: solid;
    border-right-width: 2px;
}
.gui-panel-filter:hover {
    border-left-color: #fa9c19;}
.gui-panel-icon {
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-origin: content-box;
    
    width: 14px;
    height: 23px;
    
    cursor: pointer;
    padding-top: 11px;
    padding-bottom: 0px;
    position: absolute;
}

.gui-panel-apply {
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-origin: content-box;
    
    width: 20px;
    height: 24px;
    
    cursor: pointer;
    padding-top: 7px;
    padding-bottom: 0px;
    
    background-image: url(../../../views/shared/images/iconset/magnifying_glass_white.svg);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    top: 0px;
    right: 4px;
    
    border: 0;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}
.gui-panel-save {
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-origin: content-box;
    
    width: 20px;
    height: 24px;
    
    cursor: pointer;
    padding-top: 7px;
    padding-bottom: 0px;
    
    background-image: url(../../../views/shared/images/iconset/search_list_plus_white.svg);
    top: 0px;
    right: 32px;
    
    border: 0;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}
.gui-panel-suggestion {
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-origin: content-box;
    
    width: 20px;
    height: 24px;
    
    cursor: pointer;
    padding-top: 7px;
    padding-bottom: 0px;
    
    background-image: url(../../../views/shared/images/iconset/search_list_white.svg);
    top: 0px;
    right: 60px;
    
    border: 0;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}
.gui-panel-apply:hover,
.gui-panel-save:hover,
.gui-panel-suggestion:hover {
    border-bottom-color: #fff;
    padding-top: 4px;
    padding-bottom: 3px;
}

.gui-panel-backward {
    background-image: url(../../../views/shared/images/iconset/play_dark.svg);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    top: 0px;
    left: -16px;
    padding-left: 2px;
}
.gui-panel-backward:hover {
    background-color: #ccc;
}

.gui-panel-forward {
    background-image: url(../../../views/shared/images/iconset/play_dark.svg);
    top: 0px;
    right: -16px;
    padding-left: 2px;
}
.gui-panel-forward:hover {
    background-color: #ccc;
}

/* jumplist */
.gui-jumplist {
    position: relative;
    width: 100%;
    min-height: 34px;
    height: auto;
}
.gui-jumplist-page-current, 
.gui-jumplist-page-first, 
.gui-jumplist-page-last, 
.gui-jumplist-f-backward, 
.gui-jumplist-f-forward {
    float: left;
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-top: 20px;
    margin-left: 17px;
    margin-right: -3px;
    font-size: 0.7em;
    font-weight: bold;
    font-color: #aaa;
    text-align: center;
    cursor: pointer;
}
.gui-jumplist-page-current::after, 
.gui-jumplist-page-first::after, 
.gui-jumplist-page-last::after, 
.gui-jumplist-f-backward::after, 
.gui-jumplist-f-forward::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 3px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 16px solid transparent;
    width: 0px;
    height: 0px;
}
.gui-jumplist-page-current::after {
    border-top: 16px solid #777;
}
.gui-jumplist-page-first:hover::after, 
.gui-jumplist-page-last:hover::after,
.gui-jumplist-f-backward:hover::after, 
.gui-jumplist-f-forward:hover::after {
    border-top: 16px solid #fa9c19;}
.gui-jumplist-page-current {
    cursor: default;
}
.gui-jumplist-page-first.gui-disabled,
.gui-jumplist-page-last.gui-disabled,
.gui-jumplist-f-backward.gui-disabled, 
.gui-jumplist-f-forward.gui-disabled {
    cursor: default;
    display: none;
}
.gui-jumplist-page-first.gui-disabled::after,
.gui-jumplist-page-last.gui-disabled::after,
.gui-jumplist-f-backward.gui-disabled::after, 
.gui-jumplist-f-forward.gui-disabled::after {
    border-top: transparent;
}
.gui-jumplist-controls {
    position: relative;
    display: inline-block;
    float: right;
}
.gui-jumplist-status {
    position: relative;
    display: inline-block;
    float: right;
    padding-top: 7px;
    font-size: 0.8em;
    color: #aaa;
    margin-right: 10px;
}
.gui-jumplist-status strong {
    font-size: 1.2em;
    font-weight: bold;
    color: #777;
}

/* popup */
.gui-popup {
    position: absolute;
    width: auto;
    height: auto;
    display: block;
    
    background-color: #eee;
    border-color: #777;
    border-width: 4px;
    border-style: solid;
    box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.85);
}
.gui-popup:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 16px solid #777;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
    right: -4px;
    bottom: -22px;
}
.gui-popup-title {
    position: relative;
    width: auto;
    height: 28px;
    display: block;
    padding-top: 4px;
    padding-left: 8px;
    font-size: 0.9em;
    color: #fff;
    background-color: #777;
    border-bottom-color: #fff;
    border-bottom-width: 2px;
    border-bottom-style: dashed;
}
.gui-popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 34px;
    padding-bottom: 34px;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* popup list */
.gui-popup-content > .gui-list {
    background-color: transparent;
    width: 300px;
    height: 100%;
    border: 0;
}

/* popup input */
.gui-popup-content > .gui-input {
    background-color: transparent;
    color: #777;
    width: 300px;
    
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border: 0;
    
    text-align: right;
}
.gui-popup-content > .gui-input:hover {
    color: #777;
}
.gui-popup-content > .gui-input:focus {
    color: #333;
}

/* selectable item */
.gui-list > .gui-item, .gui-dropbox-list > .gui-item {
    background-color: #eee;
    color: #777;
    
    font-size: 0.8em;
    /* font-weight: bold; */
    
    cursor: pointer;
    position: relative;
    
    left: 0px;
    width: 100%;
    height: 34px;
    
    padding-top: 7px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 3px;
    
    border: 0;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #777;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #eee;
    
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.gui-list > .gui-item:hover, .gui-dropbox-list > .gui-item:hover {
    background-color: #777;
    border-left-color: #777;
    border-right-color: #eee;
    color: #fff;
    text-align: right;
}
.gui-list > .gui-item.gui-selected, .gui-dropbox-list > .gui-item.gui-selected {
    color: #fa9c19;}
.gui-list > .gui-item.gui-selected:hover, .gui-dropbox-list > .gui-item.gui-selected:hover {
    color: #FFBC23;
}
.gui-list > .gui-item.gui-disabled, .gui-dropbox-list > .gui-item.gui-disabled {
    background-color: #eee;
    border-left-color: #777;
    border-right-color: #eee;
    color: #ccc;
}
.gui-list > .gui-item.gui-disabled:hover, .gui-dropbox-list > .gui-item.gui-disabled:hover {
    background-color: #eee;
    border-left-color: #777;
    border-right-color: #eee;
    color: #ccc;
    text-align: left;
}

/* popup list item */
.gui-popup-content > .gui-list > .gui-item {
    background-color: transparent;
    border-color: transparent;
    color: #aaa;
    text-align: left;
}
.gui-popup-content > .gui-list > .gui-item:hover {
    background-color: transparent;
    border-color: transparent;
    color: #333;
    text-shadow: 0 0 1px #aaa;
}
.gui-popup-content > .gui-list > .gui-item.gui-selected {
    color: #fa9c19;    text-shadow: none;
}

/* tabs item */
.gui-tabs > .gui-item {
    color: #ccc;
    
    font-size: 0.9em;
    font-weight: bold;
    
    height: 20px;
    
    display: inline-block;
    
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    
    border: 0;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #fa9c19;}
.gui-tabs > .gui-item.gui-selected {
    color: #777;
    border-bottom-color: #777;
}
.gui-tabs > .gui-item:hover {
    color: #333;
    text-shadow: 0 0 1px #aaa;
    
    cursor: pointer;
}

/* table item (tuple) */
.gui-table .gui-item-tuple {
    background-color: #eee;
    color: #777;
    
    cursor: pointer;
    position: relative;
    
    font-size: 0.8em;
    font-weight: bold;
    
    left: 0px;
    width: 100%;
    height: 34px;
    
    border: 0;
    
    vertical-align: top;
	overflow: hidden;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.gui-table .gui-item-tuple:nth-child(odd) {
    background-color: #ccc;
}
.gui-table .gui-item-tuple:hover {
    background-color: #777;
    color: #eee;
}
.gui-table .gui-item-tuple.gui-selected {
    color: #fa9c19;}
.gui-table .gui-item-tuple.gui-selected:hover {
    color: #FFBC23;
}
.gui-table .gui-item-tuple.gui-disabled {
    background-color: #777;
    color: #fff;
    cursor: default;
}

.gui-table .gui-item-tuple-attr {
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 3px;
    
    border: 0;
    
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
    
    width: auto;
    display: table-cell;
    table-layout: fixed;
    
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #eee;
}
.gui-table .gui-item-tuple-attr:first-child {
    width: 140px;
}
.gui-table .gui-disabled .gui-item-tuple-attr {
    border-bottom-style: dashed;
    border-bottom-width: 2px;
    border-bottom-color: #eee;
}

/* forrest item (leaf) */
.gui-item-leaf {
    background-color: #eee;
    color: #aaa;
    
    font-size: 1.0em;
    
    cursor: pointer;
    position: relative;
        
    display: inline-block;
    float: left;
    
    margin-top: 5px;
    margin-right: 5px;
    /*
    -moz-border-radius-topleft: 24px; -webkit-border-top-left-radius: 24px; -khtml-border-top-left-radius: 24px; border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px; -webkit-border-bottom-right-radius: 24px; -khtml-border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
    */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    width: 235px;
    height: auto;
    
    /* box-shadow: 0px -4px 0px #ccc; */
}
.gui-item-leaf:hover {
    background-color: #777;
    /* box-shadow: 0px -4px 0px #ccc; */
}
.gui-item-leaf-label {
    position: absolute;
    top: -14px;
    left: 0px;
}
.gui-item-leaf-stem {
    position: absolute;
    top: -20px;
    left: 20px;
    height: 20px;
}
.gui-item-leaf-title {
    position: relative;
    
    font-size: 1.0em;
    /* font-weight: bold; */
    
    color: #777;
    
    padding-top: 17px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 13px;
    
    text-align: right;
    
    width: 100%;
    height: auto;
    /* height: 34px; */
    
    word-wrap: break-word;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.gui-item-leaf:hover .gui-item-leaf-title {
    color: #fff;
}
.gui-item-leaf.gui-selected {
    /* background-color: rgba(252,255,197,0.3); */
    /* box-shadow: 0px -4px 0px #23ac38; */
    box-shadow: 0px 0px 0px 120px rgba(252,255,197,0.3) inset;
}
.gui-item-leaf.gui-selected:hover {
    background-color: #777;
    /* box-shadow: 0px -4px 0px #23ac38; */
    box-shadow: none;
}
.gui-item-leaf.gui-selected .gui-item-leaf-title {
    color: #fa9c19;}
.gui-item-leaf.gui-selected:hover .gui-item-leaf-title {
    color: #FFBC23;
}
.gui-item-leaf-body {
    position: relative;
    
    font-size: 0.8em;
    
    padding-left: 20px;
    padding-right: 20px;
    
    text-align: left;
    overflow: hidden;
    
    color: #aaa;
    
    width: 100%;
    height: auto;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.gui-item-leaf-body > strong {
    line-height: 2.5;
}
.gui-item-leaf-body > pre {
    margin-top: 0px;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.gui-item-leaf-body > pre:first-of-type {
    /* font-weight: bold; */
    text-transform: uppercase;
}
.gui-item-leaf-body * {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
.gui-item-leaf.gui-selected .gui-item-leaf-body {
    /* color: #333; */
}
.gui-item-leaf:hover .gui-item-leaf-body {
    color: #ccc;
}
.gui-item-leaf-body > .gui-item-leaf-info div em {
    position: relative;
    display: block;
    
    font-style: normal;
    word-wrap: break-word;
}
.gui-item-leaf-body > .gui-item-leaf-info div strong {
    position: relative;
    display: block;
    padding-left: 8px;
    border: 0;
    border-top-style: solid;
    border-top-color: #ccc;
    border-top-width: 1px;
    
    word-wrap: break-word;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.gui-item-leaf-body > .gui-item-leaf-detail {
    position: relative;
    /*
    top: 0px;
    right: 0px;
    */
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    /* modern browsers defaults to content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* disabled items */
.gui-disabled > .gui-item {
    background-color: #eee;
    border-left-color: #777;
    border-right-color: #eee;
    color: #ccc;
}
.gui-disabled > .gui-item:hover {
    background-color: #eee;
    border-left-color: #777;
    border-right-color: #eee;
    color: #ccc;
    text-align: left;
}
.gui-disabled > .gui-item.gui-selected {
    background-color: #eee;
    border-left-color: #777;
    border-right-color: #eee;
    color: #aaa;
}
.gui-disabled > .gui-item.gui-selected:hover {
    background-color: #eee;
    border-left-color: #777;
    border-right-color: #eee;
    color: #aaa;
    text-align: left;
}

.gui-autocomplete-front {
    z-index: 11;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-color: #eee;
    color: #777;
    width: 160px;
    height: 20px;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    outline: none;
    display: block;
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px -webkit-border-top-left-radius: 24px;
    -khtml-border-top-left-radius: 24px;
    border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px;
    -webkit-border-bottom-right-radius: 24px;
    -khtml-border-bottom-right-radius: 24px;
    border-bottom-right-radius: 24px;
}
.gui-autocomplete-front:hover {
    background: transparent;
    border-color: #777;
    color: #fff;
}
.gui-autocomplete-front:focus {
    text-align: left;
    background: transparent;
}
.gui-autocomplete-behind {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    background: #eee;
    border-color: #eee;
    color: #ccc;
    width: 160px;
    height: 20px;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    outline: none;
    display: block;
    border: 1;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius-topleft: 24px;
    -webkit-border-top-left-radius: 24px;
    -khtml-border-top-left-radius: 24px;
    border-top-left-radius: 24px;
    -moz-border-radius-bottomright: 24px;
    -webkit-border-bottom-right-radius: 24px;
    -khtml-border-bottom-right-radius: 24px;
    border-bottom-right-radius: 24px;
}
.gui-autocomplete-behind-hover {
    background-color: #777;
    border-color: #777;
    color: #DDD;
}
.gui-autocomplete-behind-focus {
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -khtml-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.ui-autocomplete.ui-menu {
    left: 0px;
    margin-left: 0px;
    padding-left: 0px;
    border-top-color: #777;
    border-top-style: dashed;
    border-top-width: 2px;
    border-bottom-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    width: 160px;
    z-index: 11;
}

.ui-helper-hidden-accessible { display:none; }

.ui-autocomplete.ui-menu > .ui-menu-item {
    background-color: #eee;
    color: #777;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    left: 0px;
    width: 100%;
    height: 34px;
    padding-top: 7px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 3px;
    border: 0;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #777;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.ui-autocomplete.ui-menu > .ui-menu-item:hover {
    background-color: #777;
    border-left-color: #777;
    border-right-color: #eee;
    color: #fff;
    text-align: right;
}

.gui-autocomplete {
    position: absolute;
    width: 200px;
    height: 30px;
    display: block;
}

/* general attribute */
.gui-invisible {
    display: none;
}

/* masonry */
.masonry .masonry-brick {
    -webkit-transition: top 0.5s, left 0.3s, background-color .2s, border-color .2s, color .2s;
    -moz-transition: top 0.5s, left 0.3s, background-color .2s, border-color .2s, color .2s;
    -ms-transition: top 0.5s, left 0.3s, background-color .2s, border-color .2s, color .2s;
    -o-transition: top 0.5s, left 0.3s, background-color .2s, border-color .2s, color .2s;
    transition: top 0.5s, left 0.3s, background-color .2s, border-color .2s, color .2s;
}

/* remove input icons in ie to preserve padding */
::-ms-clear {
    display: none;
}

/* a loader style */
/* reference: http://codepen.io/collection/HtAne/5/ */
.gui-loader {
    position: relative;
    width: 2.5em;
    height: 2.5em;
    -webkit-transform: rotate(165deg);
    transform: rotate(165deg);
}
.gui-loader:before,
.gui-loader:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.25em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.gui-loader:before {
    -webkit-animation: gui-loader-before 2s infinite;
    animation: gui-loader-before 2s infinite;
}
.gui-loader:after {
    -webkit-animation: gui-loader-after 2s infinite;
    animation: gui-loader-after 2s infinite;
}
@-webkit-keyframes gui-loader-before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
}
@-webkit-keyframes gui-loader-after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
}
@keyframes gui-loader-before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
}
@keyframes gui-loader-after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
}

/* mini loader */
.gui-inline-loader {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: gui_inline_keyframes 1s linear infinite alternate;
    -moz-animation: gui_inline_keyframes 1s linear infinite alternate;
    animation: gui_inline_keyframes 1s linear infinite alternate;
    margin: 46px auto;
    position: relative;
    left: -12px;
}
@-webkit-keyframes gui_inline_keyframes {
    0%{
    background-color: rgba(35, 172, 56, 1);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 0.2), 
    24px 0px 0px 0px rgba(35, 172, 56, 0.2);
    }
    25%{ 
    background-color: rgba(35, 172, 56,  0.4);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 2), 
    24px 0px 0px 0px rgba(35, 172, 56, 0.2);
    }
    75%{ background-color: rgba(35, 172, 56, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 0.2), 
    24px 0px 0px 0px rgba(35, 172, 56, 1);
    }
}
@-moz-keyframes gui_inline_keyframes {
    0%{
    background-color: rgba(35, 172, 56, 1);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 0.2), 
    24px 0px 0px 0px rgba(35, 172, 56, 0.2);
    }
    25%{ 
    background-color: rgba(35, 172, 56, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 2), 
    24px 0px 0px 0px rgba(35, 172, 56, 0.2);
    }
    75%{ background-color: rgba(35, 172, 56, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(235, 172, 56, 0.2), 
    24px 0px 0px 0px rgba(35, 172, 56, 1);
    }
}
@keyframes gui_inline_keyframes {
    0%{
    background-color: rgba(35, 172, 56, 1);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 0.2), 
    24px 0px 0px 0px rgba(35, 172, 56, 0.2);
    }
    25%{ 
    background-color: rgba(35, 172, 56, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 2), 
    24px 0px 0px 0px rgba(35, 172, 56, 0.2);
    }
    75%{ background-color: rgba(35, 172, 56, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(35, 172, 56, 0.2), 
    24px 0px 0px 0px rgba(35, 172, 56, 1);
    }
}