/* Variables */
:root{
    --red: #c55252;
    --red-01: rgba(197, 82, 82, 0.1);
    --green: #83a878;
    --green-01: rgba(131, 168, 120, 0.1);
    --blue: #54739b;
    --blue-01: rgba(84, 115, 155, 0.1);
    --purple: #815ac4;
    --purple-01: rgba(129, 90, 196, 0.1);
    --yellow: #f3c94d;
    --pink: #c37fd5;
    --brown: #715a4c;
    --black: #333333;

    --main: #54739b;
    --main-01: rgba(84, 115, 155, 0.1);
    --main-015: rgba(84, 115, 155, 0.15);
    --main-02: rgba(84, 115, 155, 0.2);
    --main-03: rgba(84, 115, 155, 0.3);
    --main-04: rgba(84, 115, 155, 0.4);
    --main-05: rgba(84, 115, 155, 0.5);
}

*, :before, :after{position:relative;box-sizing:border-box;margin:0;}

/* Tags */
html{width:100%;height:100%;}
body{width:100%;height:100%;font-family:TitilliumWeb, sans-serif;background-color: #eee;color:#333;}
header, footer, nav, article{display:block;}
a{color:inherit;text-decoration:none;}
input, select, textarea, button{font-family:inherit;border:0;outline:none;}
button{background:none;}
label[for], a[href], button{cursor:pointer;}

/* Helpers */
.tal{text-align:center;}
.tac{text-align:left;}
.tar{text-align:right;}
.loading:after{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.2);content:'';z-index:10;}

/* Inputs */
.input{display:block;background-color:white;width:100%;height:36px;padding:0 8px;border:2px solid var(--main-03);}
.input:focus{border-color:var(--main);}
.input.input-number{text-align:right;}
.input.textarea{padding:8px;height:200px;}
.input-invisible{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;z-index:-1;}
.input-invisible + .input-checkable:before{display:inline-block;vertical-align:middle;top:-0.1em;font-family:MaterialIcons;font-size:1.1em;content:'check_box_outline_blank';}
.input-invisible[type=radio] + .input-checkable:before{content:'radio_button_off';}
.input-invisible:checked + .input-checkable:before{content:'check_box';}
.input-invisible[type=radio]:checked + .input-checkable:before{content:'radio_button_on';}
.input-checkable-outer{display:block;}
.input-checkable-outer:hover{color:var(--main);}
.input-datetime{display:flex;margin:0 -3px;}
.input-datetime > .input{margin:0 3px;}
.input-color{padding:0 2px;}
.input-file{padding:6px 12px;}

.input-container{display:flex;}
.input-container > .input-icon{top:0;min-width:36px;line-height:32px;text-align:center;font-size:16px;border:2px solid var(--main-03);color:var(--main);background-color: white;order:1;}
.input-container > .input-icon img{display:block;padding:2px;width:32px;}
.input-container > .input{border-left-width:0;order:2;}
.input-container > .input:focus + .input-icon{border-color:var(--main);}

.radio-switch{display:flex;height:36px;border:1px solid var(--main-03);background-color:white;}
.radio-switch .radio-switch-item{flex:1;line-height:32px;text-align:center;font-weight:700;border:1px solid var(--main-03);color:var(--main-05);}
.radio-switch .radio-switch-item:hover{color:var(--main);}
.radio-switch input:checked + .radio-switch-item{outline:1px solid var(--main);background-color: var(--main);color:white;z-index:1;}
.radio-switch input:checked + .radio-switch-item.red{outline:1px solid var(--red);background-color: var(--red);border-color: var(--red);}
.radio-switch input:checked + .radio-switch-item.green{outline:1px solid var(--green);background-color: var(--green);border-color: var(--green);}


/* Layouts */
.body-nav{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:50;}
.body-content{position:absolute;top:0;left:250px;right:0;bottom:0;overflow:auto;}
.body-connect{display:flex;width:100%;height:100%;}
.body-connect .floating{margin:auto;}
.page-header{position:absolute;top:0;left:0;right:0;height:40px;z-index:10;}
.page-content{position:absolute;top:40px;left:0;right:0;bottom:0;overflow:auto;}

/* Nav */
.nav{width:100%;height:100%;display:flex;flex-direction:column;background-color:white;box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);}
.nav-header{display:flex;height:50px;align-items:center;overflow:hidden;background-color:var(--main);color:white;}
.nav-header-icon{width:50px;display:flex;padding:7px;}
.nav-header-icon img{margin:auto;max-width:100%;max-height:100%;}
.nav-header-title{flex:1;font-size:20px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.nav-stores{display:block;}
.nav-stores-select{display:block;width:100%;height:40px;padding:0 10px;font-size:14px;font-weight:600;border:0;background-color:white;}
.nav-nav{flex:1;overflow:hidden;background-color:var(--main-01);padding:10px 0;}
.nav-group{}
.nav-group-title{display:flex;height:40px;line-height:40px;}
.nav-group-icon{width:40px;height:40px;font-family:MaterialIcons;font-weight:normal;font-size:20px;text-align:center;}
.nav-group-name{flex:1;font-size:18px;padding:0 10px 0 0;}
.nav-links{min-height:80px;}
.nav-link{display:flex;height:35px;line-height:35px;padding-left:30px;}
.nav-link-icon{width:35px;height:35px;font-family:MaterialIcons;font-weight:normal;font-size:16px;text-align:center;}
.nav-link-name{flex:1;font-size:16px;padding:0 10px 0 0;}
.nav-link:hover{background-color:var(--main-02);color:var(--main);}
.nav-link.selected{background-color:var(--main-02);color:var(--main);font-weight:700;}
.nav-user{display:flex;height:50px;align-items:center;margin-top:auto;}
.nav-user-infos{flex:1;line-height:1.2;padding:0 6px 0 12px;overflow:hidden;}
.nav-user-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;}
.nav-user-mail{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;}
.nav-user-btn{width:50px;}
.nav-disconnect{width:50px;height:50px;line-height:50px;font-size:20px;font-family:MaterialIcons;}
.nav-disconnect:hover{background-color:#eee;}

/* Tabs */
.tabs{display:flex;height:40px;line-height:40px;background-color:white;box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);}
.tabs-item{padding:0 12px;border:2px solid transparent;border-width:2px 0;line-height:36px;font-size:16px;}
.tabs-item:hover{color:var(--main);}
.tabs-item.selected{font-weight:700;color:var(--main);border-bottom-color: var(--main);}
/*.tabs-item.breadcrumb{background-color:#333;color:white;}*/
/*.tabs-item.breadcrumb:hover{background-color:#444;}*/
.tabs-item.current{background-color:var(--main-01);color:var(--main);text-transform: uppercase;font-weight:300;margin-right:24px;}

/* Inline Components */
.inline-boolean{text-align: center;}
.inline-boolean.true{color:var(--green);}
.inline-boolean.false{color:var(--red);}
.inline-number{text-align:right;}
.inline-null{font-size:12px;color:#999;font-style:italic;}
.inline-row:hover, .inline-email:hover, .inline-file:hover, .inline-tel:hover, .inline-url:hover{color:var(--main);}
.inline-row > a:hover, .inline-email > a:hover, .inline-file > a:hover, .inline-tel > a:hover, .inline-url > a:hover{text-decoration: underline;}

.floating-deep{position:absolute;top:100%;left:0;margin:-6px 0 0 -24px;display:none;color:#333333;z-index:10;}
.floating-deep:empty{width:100%;margin:0;}
.floating-deep:empty:after{display:block;width:100%;margin:6px 0 0 0;text-align:center;background-color:white;font-size:32px;box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);font-family:MaterialIcons;content:'more_horiz';}
:hover > .floating-deep{display:block;}

.floatings{padding:12px;font-size:0;}
.floating{display:inline-block;vertical-align:top;margin:12px;background-color:white;box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);font-size:16px;}
.floating-head{display:flex;height:40px;line-height:40px;background-color:white;font-size:0;}
.floating-head-icon{width:40px;text-align:center;font-size:20px;font-family:MaterialIcons;}
.floating-head-icon[href]:hover, .floating-head-icon[type=button]:hover{background-color:#eeeeee;cursor:pointer;}
.floating-head-icon.close{order:99;}
.floating-head > .button{margin:5px 5px;}
.floating-head-button{width:32px;height:32px;line-height:32px;margin:4px 4px 4px -4px;text-align:center;font-size:16px;font-family:MaterialIcons;border-radius:50%;}
.floating-head-button:hover{background-color: #333333;color:white;}
.floating-head-title{flex:1;font-size:16px;font-weight:700;padding:0 24px 0 0;white-space:nowrap;}
.floating-head-title strong{font-weight:200;}
.floating-head-SH{flex:10;}
.floating-content{background-color:#ddd;min-height:200px;}
.floating-foot{background-color:white;padding:5px 24px;text-align:right;}
.floating.red .floating-head{color:var(--red);}
.floating.red .floating-text{color:var(--red);background-color:var(--red-01);}
.floating.green .floating-head{color:var(--green);}
.floating.green .floating-text{color:var(--green);background-color:var(--green-01);}

.floating-table{width:100%;border-spacing:0;background-color:#fafafa;white-space: nowrap;}
.floating-table th{background-color:#333;color:white;font-weight:700;padding:6px 12px;}
.floating-table td{padding:6px 12px;}
.floating-table tbody th{background-color:rgba(0, 0, 0, 0.7);}
.floating-table tr:nth-child(2n){background-color:var(--main-01);}
.floating-table tr:hover{background-color:var(--main-02);}
.floating-table tr.selected{background-color:var(--main-04);}
.floating-table .floating-cell-buttons{padding:2px;text-align:center;font-size:0;}
.floating-table .floating-cell-sort{padding:0;}
.floating-table .floating-cell-sort > a{display:block;padding:6px 12px;}
.floating-table .floating-cell-sort > a:hover{background-color:rgba(255, 255, 255, 0.1);}
.floating-table .floating-cell-img{padding:0;font-size:0;}
.floating-table .floating-cell-img.language{padding-left:12px;}
.floating-table .floating-cell-img > img{height:36px;}
.floating-table-link:hover{text-decoration:underline;}
.floating-table-button{display:inline-block;vertical-align:top;width:32px;height:32px;line-height:32px;text-align:center;font-size:16px;border-radius:50%;font-family:MaterialIcons;}
.floating-table-button:hover{background-color:#333;color:white;}
.floating-table .floating-cell-input{padding:0;}
.floating-table .input{border:1px solid #ddd;}
.floating-table.vertical tbody th{text-align:right;}
.floating-table.vertical .inline-number{text-align:left;}

.floating-form{background-color:rgba(0, 0, 0, 0.05);padding:24px;}
.floating-form > .floating-foot{margin:24px -24px -24px -24px;}

.form-item{display:block;}
.form-item + .form-item{margin-top:24px;}
.form-label{line-height:20px;font-size:16px;margin-bottom:5px;font-weight:600;}
.form-label.required:after{font-size:1em;margin-left:3px;color:var(--red);content:'*';}
.form-help{line-height:16px;font-size:14px;margin:-3px 0 7px;opacity:0.6;font-style:italic;}
.form-input{display:block;width:100%;height:36px;padding:0 8px;font-size:16px;}
.form-row{display:flex;margin:0 -12px;}
.form-row-item{padding:0 12px;}
/*.form-columns{display:flex;margin-left:-24px;margin-right:-24px;white-space: nowrap;}*/
/*.form-columns > div{flex:1;padding:0 24px;}*/
/*.form-columns > div + div{border-left:1px solid var(--main-01);}*/
.form-overflow{margin:0 -24px;border-right:12px solid var(--main-01);padding:0 24px;overflow:hidden;}
.form-overflow:hover{overflow:auto;border-right-width:0;}
.form-overflow.h100{max-height:100px;}
.form-overflow.h200{max-height:200px;}
.form-overflow.h300{max-height:300px;}

.floating-text{background-color:#eeeeee;padding:24px;}

.floating-alone{width:100%;height:100%;}
.floating-alone > .floating{display:flex;flex-direction:column;width:100%;height:100%;margin:0;}
.floating-alone > .floating > .floating-head{flex:0;}
.floating-alone > .floating > .floating-content{flex:1;overflow:auto;}
.floating-alone > .floating > .floating-foot{flex:0;}

.floating-listing-foot{display:flex;align-items:center;background-color:white;font-size:0;padding:4px 24px;}
.floating-listing-infos{margin:0 auto;padding:0 6px;}
.floating-listing-info{display:inline-block;padding:0 6px;color:#aaa;font-size:14px;font-weight:700;}
.floating-listing-pagination{margin-left:auto;padding-left:12px;}
.pagination-link{display:inline-block;min-width:32px;height:32px;line-height:32px;text-align:center;padding:0 8px;font-size:16px;border-radius:16px;font-weight:700;}
.pagination-link:hover{background-color:#eeeeee;}
.pagination-link.disabled{background:none;color:#999;}
.pagination-link mi{font-size:20px;}

/* Button */
.button{display:inline-block;vertical-align:middle;height:30px;line-height:26px;border-bottom:4px solid rgba(0, 0, 0, 0.25);color:white;text-align:center;font-size:16px;font-weight:600;padding:0 8px;}
.button[icon]{padding-left:38px;}
.button[icon]:before{position:absolute;top:0;left:0;height:26px;width:30px;background-color:rgba(0, 0, 0, 0.1);content:'';}
.button[icon]:after{position:absolute;top:0;left:0;height:26px;line-height:28px;width:30px;font-family:MaterialIcons;font-weight:normal;content:attr(icon);}
.button:hover{opacity:0.9;}
.button[icon]:hover:after{transform:rotate(-10deg);}
.button:active{border-bottom:0;border-top:4px solid transparent;background-clip:padding-box;}

.button.red{background-color:#a54040;}
.button.green{background-color:#70b949;}
.button.blue{background-color:#2186de;}
.button.purple{background-color:#7a6dbb;}
.button.brown{background-color:#c37f4a;}
.button.grey{background-color:#777777;}
.button.black{background-color:#444444;}

/* Popup */
.popup{position:fixed;display:flex;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.2);overflow:auto;z-index:1000;}
.popup-content{margin:auto;}

/* SelectionHandler */
.SH-output{display:inline-block;margin:2px 0;background-color:white;line-height:36px;}
.SH-output-text{padding:0 12px;font-size:14px;font-style: italic;opacity:0.6;}
.SH-actions{display:none;}
.SH-action{display:block;width:100%;padding:0 12px;text-align:left;line-height:36px;font-size:16px;font-weight:400;}
.SH-action:hover{background-color:#eee;}
.SH-action.red:hover{color:var(--red);background-color: var(--red-01);}
.SH-action.green:hover{color:var(--green);background-color: var(--green-01);}
.SH-action.blue:hover{color:var(--blue);background-color: var(--blue-01);}
.SH-action.purple:hover{color:var(--purple);background-color: var(--purple-01);}
.SH-output:hover{box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);z-index:10;}
.SH-output:hover .SH-actions{display:block;}

/* ColorPicker */
.colorPicker{position:absolute;left:50%;bottom:100%;margin:0 0 12px -100px;width:200px;background-color:white;box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);z-index:100;}
.colorPicker:after{position:absolute;top:100%;left:50%;margin-left:-10px;border:10px solid transparent;border-top-color:white;border-bottom-width:0;content:'';}
.colorPicker canvas{display:block;}
.colorPicker-colorSection{display:block;background-color:black;}
.colorPicker-hueSection{display:block;margin:10px;}
.colorPicker-alphaSection{display:block;margin:10px;background-color:#eee;}
.colorPicker-colorSelector{position:absolute;top:0;left:0;width:16px;height:16px;margin:-8px -8px;border:1px solid black;border-radius:50%;}
.colorPicker-hueSelector{position:absolute;top:0;width:16px;height:16px;border-radius:50%;background-color:white;margin-left:-8px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);}
.colorPicker-alphaSelector{position:absolute;top:0;width:16px;height:16px;border-radius:50%;background-color:white;margin-left:-8px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);}
.colorPicker-stringSection{display:flex;margin:10px;background-color:#eee;}
.colorPicker-stringButton{flex:1;height:24px;line-height:24px;text-align:center;font-size:12px;cursor:pointer;}
.colorPicker-stringButton.selected{background-color:#333;color:white;font-weight:700;}

/* Scrollbar */
::-webkit-scrollbar{background-color:var(--main-02);width:12px;height:12px;}
::-webkit-scrollbar-thumb{background-color:var(--main-05);}
::-webkit-scrollbar-thumb:hover{background-color:var(--main);}