.o-dms {font-family:ubuntu, Tahoma, Geneva}
.o-dms a {color:#1769aa; outline:none}
.o-dms form :required, .o-dms form :optional {border: 1px solid #888; padding:0.25rem; border-radius: 5px}      /* include all :input! */
.o-dms fieldset {border:0}

.o-dms .o-box {position:relative;border:1px solid #e8e8e8;/*line-height:1.5*/}
.o-dms .o-box-head, .o-dms .o-box-val {padding:1rem}
/*.o-dms [class^='o-box-']:empty {padding:0}*/
.o-dms .o-box-head {background-color:#f8f8f8;color:#000;display:flex;align-items: baseline;}
.o-dms .o-box-action {display:inline-block;text-decoration:none;padding:0.1rem 0.5rem}
.o-dms .o-box-head span + .o-box-action {margin-left:auto}      /* the first action after the head will be flex'ed to the right */
.o-dms .o-box-head span ~ .o-box-action {border:1px solid #e8e8e8;background-color:#fff}
.o-dms .o-box-head .o-box-action + .o-box-action {margin-left:0.5rem}

.o-dms .o-box-val {background-color:#fff;color:#555}

.o-dms .o-action:hover {background-color:white}
.o-dms input,.o-dms textarea, .o-dms select {font-family: inherit;max-width:100%}

/* .dms-box-navigation */
.o-dms-nav {line-height: calc(1.2em + 0.5vh);}

.o-dms-nav .o-dms-nav-item {position:relative;white-space: nowrap; overflow:hidden;text-overflow:ellipsis;border: 1px solid;border-color:inherit;margin:-1px 0 0 -1px;padding:0.1rem 0.5rem}
.o-dms-nav .o-dms-nav-item a {color:#555;text-decoration:none;}
.o-dms-nav .o-dms-nav-item.is-selected{font-weight:700;}
.o-dms-nav .o-dms-nav-item {transition:all ease 0.1s}
.o-dms-nav .o-dms-nav-item.is-selected, .o-dms-nav .o-dms-nav-item:hover{background:#eee}
.o-dms-nav .o-dms-nav-item span {opacity:0.5;font-family:monospace;padding:0 0.5rem}
.o-dms-nav .o-dms-nav-item .mdi {padding:0 0.5rem}
.o-dms-nav input[type=text] {border:0px; font-size: inherit; width:50%}
.o-dms-nav input[type=checkbox] + .mdi {opacity:0.2;border-radius:20%;cursor:pointer}
.o-dms-nav input[type=checkbox]:checked + .mdi {opacity:1;background:#eee}

.o-label-upload {display:inline-block;border:1px dashed #aaa;border-radius:5px;padding:0.1rem 1rem;cursor:pointer}
.o-label-upload.is-disabled {text-decoration: line-through;}
.o-icon-doc { font-size: 3rem; display: inline-block; width: 3em; height: 4em; position: relative; border: 0.2rem solid #E6E6E6; border-radius: 0.3em; margin-bottom: 1em;}
.o-icon-doc { background-image: url(https://picsum.photos/200/300); background-size: cover;}
.o-icon-doc::before {content: "";display: block;position: absolute;top: -0.2rem;right: -0.2rem;width: 0;height: 0;border-left: 1.5em solid #cccccc77;border-top: 1.5em solid #ffffff;}
.o-icon-doc::after {content: attr(title);display: block;position: absolute;background: #777;text-align: center;bottom: 0.5em;left: -5px;color: #fff;border-radius: 1px;min-width: 2em;}
.o-icon-doc input[type="file"] { display: none;}
.o-icon-doc span {position: absolute;bottom: -2em;text-align: center;font-size: 50%;white-space: nowrap;left: 50%;transform: translate(-50%, 0);max-width: 150%;text-overflow: ellipsis;overflow: hidden;}

.o-control {width:1.4rem;white-space: nowrap;display:inline-block}
.o-control i {width:1.4rem;text-align:center;display:none;background:#eee;border-right:1px solid white;border-bottom:1px solid white;z-index:2;position:relative}
.o-control i:first-child, .o-control:hover i {display:inline-block}

select.t-dms { -moz-appearance: none;  -webkit-appearance: none;  appearance: none;}
select.t-dms:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000;}
select.t-dms { background-color: #fff; background-repeat: no-repeat, repeat;background-position: right 0.7em top 50%, 0 0;  background-size: 0.65em auto, 100%;}
select.t-dms { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>");}

select.t-dms:hover {border-color: #999;}
select.t-dms:focus {border-color: #999;color: #222;outline: none;}
select.t-dms::-ms-expand {display: none;}
select.t-dms:-moz-focusring {color: transparent;text-shadow: 0 0 0 #000}

form.is-invalid :invalid {border: 1px solid red;box-shadow:none}      /* include the form path to avoid the <form> itself to have a border */
