WEB-INF.static._static.css.main.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of marsh.uadmin Show documentation
Show all versions of marsh.uadmin Show documentation
Java project for marsh.uadmin
The newest version!
/*
durian ui
ver:1.0.68
author:noear
*/
*,*::before, *::after { box-sizing: border-box; }
html,body,main,left,right,middle,tree,menu,header,footer,block,blockquote,flex,li,ul,ol,p,hr,cell,switcher,selector,file,checkbox,radio,boxlist,detail,label,h1,h2,h3,h4,h5,h6,pre{ margin: 0px; padding: 0px; }
html {font-size: 14px; background-color: #fff; overflow: hidden; -webkit-overflow-scrolling:touch;}
html.frm{overflow:auto;}
html.frm-y{overflow-y:auto;}
html.frm10{overflow:auto;}
html.frm10-y{overflow-y:auto;}
html.frm10 body,html.frm10-y body{margin: 10px;}
html.frm20{overflow:auto;}
html.frm20-y{overflow-y:auto;}
html.frm20 body,html.frm20-y body{margin: 20px;}
body{font-family:sans-serif;}
ul { list-style: none; display: block; }
li,p { display: block; }
i, em { font-style: normal; }
th { font-weight: normal; }
table { border-collapse: collapse; border-spacing: 0px; border: 0px; }
img { border: none; }
a {color: #000;}
t {display:inline;}
button a{text-decoration:none;}
button i.fa, a.btn i.fa{width:15px; margin-right:5px;}
input:focus { outline:none;}
textarea:focus { outline:none;}
note,n{display: inline; color:#999;}
note-l,n-l{display: block;color:#999;}
code{color: green;}
.left{text-align: left!important;}
.right{text-align: right!important;}
.center{text-align: center!important;}
.top{vertical-align:top;}
.bottom{vertical-align:bottom;}
.break{word-wrap:break-word; word-break:break-all;}
.unbreak{white-space:nowrap;}
.hidden{display:none;}
h0,h1,h2,h3,h4,h5,h6{display: inline;}
h0,h0 *{font-size: 24px;}
h1,h1 *{font-size: 18px;}
h2,h2 *{font-size: 16px;}
h3,h3 *{font-size: 14px;}
h4,h4 *{font-size: 12px;}
h5,h5 *{font-size: 10px;}
h6,h6 *{font-size: 8px;}
hr{margin-bottom: 10px; margin-top:10px; height:0px;border:none;border-top:1px solid #ccc;}
input,select,button{vertical-align:middle;}
button{outline:none;}
cell{display: table-cell;}
cell th{color: #999; }
cell td{text-align: left; padding-right: 20px;}
body > header {height: 50px; line-height: 50px; background: #252a2e; color: #ffffff;overflow: hidden;font-size: 16px;}/*383e41*/
body > header a{color: #f1f1f1;text-decoration:none;font-size: 14px;}
body > header a:hover{color: #c5d9f4;}
body > header nav{overflow: hidden; }
body > header nav > *{display: inline-block; margin-left:20px; height:25px; line-height: 25px; text-align: center;}
body > header nav a.sel{color: #189aca; }
body > header nav a:hover{color:#189aca; }
/* new style */
body > header > label{display: inline-block; width: 160px; text-align: center; line-height: 50px; font-size: 16px; float:left;}
body > header > nav{display: inline-block; }
body > header > aside {display: inline-block; font-size: 14px; float:right; line-height:50px;}
body > header > .toggle{display:inline-block;width:40px; text-align:center;}
body > header > .toggle+nav > * {margin:0 10px}
body > header a.btn{ margin-right: 20px; width: auto; padding: 0 15px; color:#666; background-color: #D9DEE4; border-color: #D9DEE4;}
body > header a.btn:hover{color:#fff; background-color: #546478; border-color: #546478;}
/*body > header a.btn{ margin-right: 20px!important; width: auto!important; padding: 0 15px!important; color:#666!important; background-color: #D9DEE4!important; border-color: #D9DEE4!important;}*/
/*body > header a.btn:hover{color:#fff!important; background-color: #546478!important; border-color: #546478!important;}*/
body > header a.edit { background-color: #fd6721; color: #fff; border-color: #fd6721;}
body > header a.edit:hover { background-color: #fd7f38; }
body > header.style2{background: #333744;}/* 333744 */
body > header.style2 a:not(.btn){color:#fff; padding:0 6px;}/* fff */
body > header.style2 a.sel{background-color:#f7f7f7; border-radius:2px; color:#222;}
body > footer {text-align: center; }
body > footer p{min-height: 50px;display: inline-block; line-height: 100px;}
main {display: block; overflow: hidden;}
main.sml{margin: 10px}
main > left{float: left; overflow-x: hidden; overflow-y: auto; }
main > left::-webkit-scrollbar { display: none; }
main > middle{float: left; overflow-x: hidden; overflow-y: auto; }
main > middle::-webkit-scrollbar { display: none; }
main > right{float: right; overflow: hidden; }
main > right iframe{width: 100%!important; height: 100%!important; border: none;}
main > article{float: left;}
main > aside{ float: right;}
main > aside div{line-height: 50px; height: 50px; text-align: center;}
main > aside button{width: 100%!important; height: 36px;}
/*main > aside h2{font-size: 18px;}*/
main > aside img{width: 100%;}
left menu{background: #333744; overflow-x: hidden; overflow-y: auto; height: 100%;}
left menu > div{line-height: 38px; text-align: center; color: #5b6273; cursor: default;border-bottom: #3b4043 1px solid;border-top: #3b4043 1px solid;}/*4a5063*/
left menu > div:hover{background-color: #4b5163;border-color:#4b5163}
left menu a {text-align: center; color: #fff; text-decoration:none; line-height: 40px; width: 100%; height: 40px; display: inline-block; padding-left: 0px;}
left menu a.sel { background-color: #00c1de;}/*# 00c1de 20cedc . 189aca*/
left menu a:not(.sel):hover { background-color: #1a2028;color:#00c1de;}/* 4b5163*/
left menu hr{border-color: #3b4043;margin: 4px 20px;}
left menu.style2{background:#000}
left menu.style2 hr{border-color: #111;}
left menu.style2 div{border: #111 1px solid;border-top: #111 1px solid;}
/*left menu.style2 a.sel{background-color: #4b5163;}*/
fieldset{border:1px solid #c9c9c9; border-radius: 5px;}
tree {background-color: #eaedf1; display: block; overflow: auto; height: 100vh; overflow-x: hidden; overflow-y: auto;}
tree ul{margin-bottom: 10px;}
tree ul label{display: block; font-weight: bold; height: 40px; line-height: 40px; padding-left: 20px; overflow: hidden;}
tree ul li{height: 40px; line-height: 40px; padding-left: 20px; overflow: hidden;}
tree ul li.sel{background: #fff;}
tree ul li:hover{background: #f4f6f8;}
tree ul li.sel:hover{background-color: #fff;}
input[type="number"],input[type="text"],input[type="date"],input[type='datetime-local'],input[type='datetime'],input[type="password"]{ border: 1px solid #C9C9C9; padding-left: 2px; height: 26px; line-height: 20px; }
input[type="text"]:disabled{color:#888;background-color:#f9f9fa}
textarea{ border: 1px solid #C9C9C9; width: 394px; padding: 2px; }
textarea:disabled{color:#888;background-color:#f9f9fa}
a.btn{display: inline-block; text-decoration:none; vertical-align: middle;text-align: center; line-height: 26px; height: 26px!important; cursor:default;}
button,a.btn { background-color: #fff; border: 1px solid #0066cc; color: #0066cc; min-width: 40px; padding: 0 10px; height: 26px; font-size: 11px;}
button:hover,a.btn:hover { background-color: #0077cc;color:#fff; }
button:disabled { background-color: #f1f1f1; border: 1px solid #C9C9C9; color: #C9C9C9;}
button.edit,a.edit { background-color: #fff; color: #fd6721; border: 1px solid #fd6721; min-width: 40px; padding: 0 10px; height: 26px; font-size: 11px; }
button.edit:hover,a.edit:hover { background-color: #fd7f38; color: #fff;}
button.edit:disabled { background-color: #aaa; color: #aaa; border: 1px solid #aaa;}
button.minor,a.minor { background-color: #fff; color: #666; border: 1px solid #aaa; min-width: 40px; padding: 0 10px; height: 26px; font-size: 11px; }
button.minor:hover,a.minor:hover { background-color: #aaa; color: #fff;}
select{ -moz-appearance:none; -webkit-appearance:none;appearance:none; background: url("main_select_arrow.png") no-repeat scroll right center #fff; padding-right: 14px; padding-left: 2px; border: 1px solid #C9C9C9; height: 26px;line-height: 26px; border-radius: 0px;}
select option {line-height: 20px; height: 20px; font-size: 14px; }
selector, .selector { display: inline-block; padding: 0 2px; vertical-align: middle; cursor: pointer; border: 1px solid #C9C9C9; height: 26px; line-height: 26px; }
selector > *, .selector .stateItem { margin: 2px; padding:0 2px; display: inline-block; height: 18px; line-height: 18px; position: relative; top:-2px; font-size:12px;}
selector > *.sel, .selector .selected { background-color: #0066cc; color: #fff; }
selector a{text-decoration:none;}
.btn-group{position: relative; display:inline-block;}
.btn-group .btn-dropdown{display: none; background: #D9DEE4; box-shadow: 0 3px 5px rgba(0, 0, 0, .125);}
.btn-group .btn-dropdown .btn-link{display:block;cursor: default; line-height:1.5em;}
.btn-group:hover .btn-dropdown{display: inline-block; position:absolute; z-index:99; left:0px; top:40px; }
.op{color: #999}
.tt{color:transparent!important}
.t1{color: #fd9740}
.t2{color: blue; cursor: pointer;text-decoration : none}
.t3{color: green;}
.t4,.t4 a{color: red;}
.t5,.t5 a{color: #999}
.t6,.t6 a{color:#0066cc}
.bgt{background-color:transparent!important;}
.bg0{background-color:#fff;}
.bg1{background-color: #fd9740;}
.bg2{background-color: blue; }
.bg3{background-color: green;}
.bg4{background-color: red;}
.bg5{background-color: #999}
.bg11{background-color: #252a2e;}
.bg12{background-color: #333744;}
.bg13{background-color: #eaedf1;}
.bg14{background-color: #f5f6fa;}
.bg15{background-color: #189aca;}
.bg16{background-color: #3399ff;}
.w10{width:10px!important;display: inline-block}
.w15{width:15px!important;display: inline-block}
.w20{width:20px!important;display: inline-block}
.w25{width:25px!important;display: inline-block}
.w30{width:30px!important;display: inline-block}
.w40{width:40px!important;display: inline-block}
.w45{width:45px!important;display: inline-block}
.w50{width:50px!important;display: inline-block}
.w55{width:55px!important;display: inline-block}
.w60{width:60px!important;display: inline-block}
.w65{width:65px!important;display: inline-block}
.w70{width:70px!important;display: inline-block}
.w75{width:75px!important;display: inline-block}
.w80{width:80px!important;display: inline-block}
.w90{width:90px!important;display: inline-block}
.w100{width:100px!important;display: inline-block}
.w150{width:150px!important;display: inline-block}
.w200{width:200px!important;display: inline-block}
.w250{width:250px!important;display: inline-block}
.w300{width:300px!important;display: inline-block}
.w350{width:350px!important;display: inline-block}
.w400{width:400px!important;display: inline-block}
.w450{width:450px!important;display: inline-block}
.w500{width:500px!important;display: inline-block}
.w550{width:550px!important;display: inline-block}
.w600{width:600px!important;display: inline-block}
.w20p{width:20%!important;}
.w30p{width:30%!important;}
.w50p{width:50%!important;}
.w70p{width:70%!important;}
.w80p{width:80%!important;}
.w100p{width:100%!important;}
.h10{height:10px;}
.h15{height:15px;}
.h20{height:20px;}
.h25{height:25px;}
.h30{height:30px;}
.h35{height:35px;}
.h40{height:40px;}
.h45{height:45px;}
.h50{height:50px;}
.h60{height:60px;}
.h70{height:70px;}
.h80{height:80px;}
.h90{height:90px;}
.ln15{line-height:15px;}
.ln20{line-height:20px;}
.ln25{line-height:25px;}
.ln30{line-height:30px;}
.ln35{line-height:35px;}
.ln40{line-height:40px;}
.ln50{line-height:50px;}
.ln60{line-height:60px;}
.ln70{line-height:70px;}
.ln80{line-height:80px;}
.ln90{line-height:90px;}
.rad1{border-radius:1px;}
.rad2{border-radius:2px;}
.rad3{border-radius:3px;}
.rad4{border-radius:4px;}
.rad5{border-radius:5px;}
.sml{font-size:small}
.big{font-size:large}
.hide{display:none;}
.box{box-shadow: 0px 1px 1px rgba(0,0,0,0.15);}
.noline{text-decoration: none;}
.fixed{position:fixed;z-index:999;width:100%;}
detail {display: block; background: #fff; padding: 10px;}
detail table{ width: auto; }
detail table th{width: 100px; text-align: left;}
detail table td{padding: 8px; text-align: left; }
detail table td img{width: 100px;}
detail table td > div{line-height: 34px;}
/*detail h2{font-size: 18px; line-height: 20px;}*/
detail form th,detail .form th{text-align:right;padding-right:5px;} /*font-weight:bold;*/
detail button,.form button,.form a.btn { background-color: #fd6721; color: #fff; border: none; min-width: 100px!important; line-height:30px!important;height:30px!important; font-size: 12px; }
detail button:hover,.form button:hover,.form a.btn:hover { background-color: #fd7f38; }
detail button:disabled,.form button:disabled { background-color: #aaa; }
detail button.minor,.form .minor{ background-color: #f7f7f7; color: #333; border: 1px solid #ddd; min-width: 100px; height:30px; font-size: 12px; }
detail button.minor:hover,.form .minor:hover { background-color: #fefefe; color: #333;}
detail button.minor:disabled,.form .minor:disabled { background-color: #aaa; color: #333;}
.form button,.form a.btn,.form .minor{margin-left:10px!important; min-width:0px!important; width:auto!important; padding:0 20px!important;}
detail section{margin-bottom: 20px;}
detail section > header{display: block; padding: 10px; background: #f5f6fa; margin-bottom: 10px;}
detail section > article{ padding: 10px;}
detail section > div{line-height: 34px; height: 34px;}
detail thead th{ height: 30px; color:#999; text-align: center; }
detail tbody tr{background: #fff;}
detail tbody.list tr:hover { background: #f9f9fa; }
detail tbody.list tr:hover td { background: #f9f9fa; }
/*列表样式*/
datagrid{display: block; width: 100%;}
datagrid table { border-collapse: collapse; width: 100%;}
datagrid thead { background: #f5f6fa; }
datagrid thead td,datagrid thead th { height: 20px; color:#999; text-align: center; }
datagrid td,datagrid th { text-align: center; border: 1px solid #f5f6fa; padding: 4px!important; line-height: 18px; }
datagrid tbody tr{background: #fff;}
datagrid tbody tr:hover { background: #f1f1fa; }
datagrid tbody tr:hover td { background: #f1f1fa; }
datagrid tbody tr:hover a { }
datagrid tbody td.edit input:nth-child(2n+1){margin-bottom: 2px;}
datagrid tbody td.edit button:nth-child(2n+1){margin-bottom: 2px;}
datagrid tbody td.op{text-align: center;}
/*datagrid h2{font-size: 18px;}*/
datagrid thead td[sort],datagrid thead th[sort]{background: url(main_sort.png) no-repeat bottom right; background-size: 16px 16px;}
datagrid thead td[sort].sel,datagrid thead th[sort].sel {background-image: url(main_sort_sel.png); color: #000;}
datagrid.list td,datagrid.list th{border-left: none;border-right: none;}
datagrid td button,datagrid td a.btn{min-width:auto;}
/*分页控件*/
pagebar {display:block;overflow:hidden;}
pagebar input { width: 50px; text-align: center; }
pagebar em { font-style: normal; display:inline-block; height:26px; line-height:26px; padding: 0px 10px;}
pagebar em > span { color: red; }
pagebar right{float:right;display:inline-block;text-align: right;}
pagebar left{float:left; display:inline-block;}
/*色块*/
block{display: block; padding: 10px; background: #f5f6fa; margin-bottom: 10px; }
blockquote{display: block; border-left:4px #888 solid; padding:10px; background: #f5f6fa; margin-bottom: 10px;}
.blockquote{border-left:4px #888 solid;}
blockquote left,.blockquote left {line-height:30px;}
/*列表上方的工具条*/
toolbar {display: block; padding: 4px 10px; background: #f5f6fa;margin-bottom: 10px; min-height:40px; line-height: 40px;}
toolbar form{display: inline;}
toolbar.style2{background: transparent;}
toolbar input.date-input{height: 24px;width:80px;}
toolbar input.date-input{height: 24px;width:80px;}
/* new:: */
toolbar left{ display:inline-block;text-align: left;}
toolbar right{float:right;display:inline-block;text-align: right;}
toolmenu{display: block; padding: 4px 10px; background: #f5f6fa;margin-bottom: 10px; height:40px; line-height: 40px;} /*cancel::*/
/* 重置 detail 的样式 */
block button, toolbar button { background-color: #fff; border: 1px solid #0066cc; color: #0066cc; min-width: 40px; padding: 0 10px; height: 26px; font-size: 11px;}
block button:hover, toolbar button:hover { background-color: #0077cc;color:#fff; }
block button:disabled, toolbar button:disabled { background-color: #f1f1f1; border: 1px solid #C9C9C9; color: #C9C9C9;}
block button.edit, toolbar button.edit { background-color: #fff; color: #fd6721; border: 1px solid #fd6721; min-width: 40px; padding: 0 10px; height: 26px; font-size: 11px; }
block button.edit:hover, toolbar button.edit:hover { background-color: #fd7f38; color: #fff;}
block button.edit:disabled, toolbar button.edit:disabled { background-color: #aaa; color: #aaa; border: 1px solid #aaa;}
block button.minor, toolbar button.minor { background-color: #fff; color: #666; border: 1px solid #aaa; min-width: 40px; padding: 0 10px; height: 26px; font-size: 11px; }
block button.minor:hover, toolbar button.minor:hover { background-color: #aaa; color: #fff;}
tabbar{display: inline;}
tabbar button,
tabbar a.btn{margin-right: 20px!important; width: auto!important; padding: 0 15px!important; color:#666!important; background-color: #D9DEE4!important; border-color: #D9DEE4!important;}
tabbar button:hover{color: #444!important; background-color: #DCE2E7!important; border-color: #DCE2E7!important;}
tabbar a.btn:hover{color:#fff!important; background-color: #546478!important; border-color: #546478!important;}
tabbar button.sel,
tabbar a.sel { color:#fff!important; background-color: #546478!important; border-color: #546478!important;}
html.style2{background: #f5f6fa;}
html.style2 toolmenu{background: transparent; text-align: center;}
html.style2 detail{background: transparent;}
html.style2 detail section{border: none; }
html.style2 detail section > header{background:transparent; margin-bottom: 0px!important;padding: 0 10px;}
html.style2 detail section > article {margin: 10px; padding: 10px; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0,0.15)}
html.style2 tabbar button{height: 30px; padding: 0 20px;}
body > toper{height:55px;width:100%; display: block; overflow: hidden;}
body > main > left{height: calc(100vh);}
body > main > middle{height: calc(100vh);}
body > main > right{height: calc(100vh); overflow: auto;}
body > main > right.frm{overflow: hidden; height: calc(100vh)!important;padding: 0px!important;}
body > main > iframe{width: 100%!important; height: 100%!important; border: none;}
body > main.frm detail{padding: 0px; padding-top: 5px;}
body > header+main > left{height: calc(100vh - 50px);}
body > header+main > middle{height: calc(100vh - 50px);}
body > header+main > right{height: calc(100vh - 50px)!important; }
body > header+main > right.frm{height: calc(100vh - 50px)!important;padding: 0px!important;}
body > header+main > iframe{width: 100%!important; height: calc(100vh - 50px)!important; border: none;}
body > toper{height:44px;width:100%; display: block; overflow: hidden;padding-top:9px;}
body > toper+main > iframe{width: 100%!important; height: calc(100vh - 64px)!important; border: none;}
toper > left{text-align: left;float:left;}
toper > right{text-align: right;float:right;}
@media screen {
main > left{width: 160px; }
main > middle{width: 160px; }
/*main > right{width:calc(100% - 180px);}*/
main > right{width:calc(100% - 160px);}
main > left + middle + right {width: calc(100% - 320px); }
/*main > right.frm{width:calc(100% - 160px)!important;}*/
main > article{width:calc(100% - 180px);}
main > aside{ width: 170px; }
main > article.sml{width:calc(100% - 250px);}
main > article.sml + aside{ width: 240px; }
main.smlmenu > left{width: 40px; }
main.smlmenu > left > menu items{visibility: hidden;}
main.smlmenu > middle{width: 160px; }
main.smlmenu > right{width:calc(100% - 40px);}
main.smlmenu > left + middle + right {width: calc(100% - 220px); }
main.smlmenu > right.frm{width:calc(100% - 40px)!important;}
body > header div{width: calc(100%);}
}
/* for admin from */
detail form select{width: 300px;}
detail form input[type="text"]{width: 300px;}
detail form input[type="datetime-local"]{width: 300px}
detail form input[type="date"]{width: 300px}
detail form .txt{width: 300px}
detail form .longtxt{width: 601px!important;}
detail form textarea{width: 600px; height: 100px;}
tile{display: inline-block; background: #fff; box-shadow: 0px 1px 1px rgba(0,0,0,0.15);}
tile >*{display: block; margin: 10px;}
/* form ext */
file, radio,checkbox,switcher{display: inline-flex; line-height: 0px; vertical-align: middle;}
file input:not([type='text']), radio input:not([type='text']), boxlist input:not([type='text']), checkbox input:not([type='text']),switcher input:not([type='text']){position: absolute; clip: rect(0, 0, 0, 0); display: none;}
file label, radio label,checkbox label,switcher label,boxlist label{display: inline-flex;margin: 0px;}
file a { background:#fff; border: 2px dotted #444; cursor: pointer; user-select: none; display: inline-block; text-align: center; font-size: 40%; overflow: hidden; position: relative; height:26px; line-height:22px; padding: 0 15px;}
file a:hover { background:#ddd; }
file.sel a::after{content: "✓"; font-size: 18px; color: #0066cc;position: absolute; z-index: 2; right: 0px; top: 0px;}
radio input + a::before,checkbox input + a::before{content: "\a0";display: inline-block;vertical-align: middle;font-size: 18px;width: 1em;height: 1em;margin-right: .2em;border: 1px solid #ddd; background-color:#fff; text-indent: .15em;line-height: 1em;}
radio input + a::before{border-radius: 50%;}
radio input:checked + a::before{background-color: #0066cc; border-color:#0066cc; background-clip: content-box;padding: .2em;}
checkbox input:checked + a::before{content: "✓";color: #0066cc; border-color:#0066cc; background-clip: content-box;}
boxlist{display: block;}
boxlist label{cursor: default; position: relative;}
boxlist label a{display: inline-block;border: 1px solid #C9C9C9; line-height: 24px; padding: 0 11px;}
boxlist input:checked + a{border: 2px solid #0066cc; line-height: 22px;padding: 0 10px;}
boxlist input:checked + a::before{content: ''; color: #0066cc;font-weight: bold; font-size: 20px; z-index: 2; position: absolute; left: 3px; top: -10px;}
boxlist label[class] a{width: calc(100% - 22px); text-align: center;}
switcher label{ cursor: default;overflow:hidden;}
switcher input + a{display: inline-block;border:1px solid #C9C9C9; border-radius: 14px; height: 24px; line-height: 24px; width: 65px;overflow: hidden;}
switcher input + a::before{content: "OFF";float: left;margin: 0 0 0 8px;font-size: 14px; }
switcher input + a::after{content: "\a0";float: right;display: inline-block; font-size: 14px;width: 14px;height: 14px; margin-top:4px; margin-right: .4em; background: #ddd;border-radius: 50%;}
switcher input:checked + a{background-color: #0066cc;border-color: #0066cc;}
switcher input:checked + a:before{content: "ON";float: right; margin: 0 8px 0 0; color: #fff;}
switcher input:checked + a:after{background-color: #fff;float:left; margin-left: .4em;margin-right: 0;}
.table{display:table!important;width:100%;padding:0px; }
.table > *{display:table-cell !important;padding: 0 10px; float:none !important;}
grid{display: grid;}
flex,.flex{display: flex!important;}
flex > aside div{line-height: 50px; height: 50px; text-align: center;}
flex > aside button{width: 100%!important; height: 36px;}
/*flex > aside h2{font-size: 18px;}*/
flex > aside img{width: 100%;}
flex > right{text-align: right;}
flex.auto > *{flex-basis:auto;}
.col-12{width: 100%!important;}
.col-11{width: 91.66666667%!important;}
.col-10{width: 83.33333333%!important;}
.col-9{width: 75%!important;}
.col-8{width: 66.66666667%!important;}
.col-7{width: 58.33333333%!important;}
.col-6{width: 50%!important;}
.col-5{width: 41.66666667%!important;}
.col-4{width: 33.33333333%!important;}
.col-3{width: 25%!important;}
.col-2{width: 16.66666667%!important;}
.col-1{width: 8.33333333%!important;}
.mar0{margin: 0px!important;}
.mar5{margin: 5px!important;}
.mar5-r{margin-right: 5px!important;}
.mar5-rb{margin: 0 5px 5px 0!important;}
.mar5-b{margin-bottom: 5px!important;}
.mar5-t{margin-top: 5px!important;}
.mar5-l{margin-left: 5px!important;}
.mar10{margin: 10px!important;}
.mar10-r{margin-right: 10px!important;}
.mar10-rb{margin: 0 10px 10px 0!important;}
.mar10-b{margin-bottom: 10px!important;}
.mar10-t{margin-top: 10px!important;}
.mar10-l{margin-left: 10px!important;}
.mar15{margin: 15px!important;}
.mar15-r{margin-right: 15px!important;}
.mar15-rb{margin: 0 15px 15px 0!important;}
.mar15-b{margin-bottom: 15px!important;}
.mar15-t{margin-top: 15px!important;}
.mar15-l{margin-left: 15px!important;}
.mar20{margin: 20px!important;}
.mar20-r{margin-right: 20px!important;}
.mar20-rb{margin: 0 20px 20px 0!important;}
.mar20-b{margin-bottom: 20px!important;}
.mar20-t{margin-top: 20px!important;}
.mar20-l{margin-left: 20px!important;}
.mar30{margin: 30px!important;}
.mar50{margin: 50px!important;}
.pad0{padding: 0px!important;}
.pad5{padding: 5px!important;}
.pad5-rb{padding: 0 5px 5px 0!important;}
.pad10{padding: 10px!important;}
.pad10-t{padding-top: 10px!important;}
.pad10-b{padding-bottom: 10px!important;}
.pad10-rb{padding: 0 10px 10px 0!important;}
.pad15{padding: 15px!important;}
.pad20{padding: 20px!important;}
.pad30{padding: 30px!important;}
.pad50{padding: 50px!important;}
.rad3{border-radius: 3px;}
.rad4{border-radius: 4px;}
.rad5{border-radius: 5px;}
.rad10{border-radius: 10px;}
.rad-max{border-radius: 100vh;}
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute;z-index:999; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content > * { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content > *:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-right{right:0px;}
.dropdown-left{left:0px;}
.dropdown-content .sel{color:#0066cc;}