﻿@import "tapestry/tapestry.less";

html{display:flex; min-height:100%;}
body{width:100%; position:relative; overflow-x:hidden; font-weight:400;}

*{box-sizing:border-box;}

body > .bg.for-popup{background-color:rgba(0,0,0,0.5) !important; position:absolute; top:44px; right:0; bottom:0; left:0; z-index:7777;
}
.for-popup{
    & > .popup{position:fixed; min-width:200px; z-index:5000; max-height:100%; max-width:100%; 
               overflow-y:auto; overflow-x:hidden; padding:20px 20px 30px 20px;
        &.right{right:0;}
        .btn-close{position:absolute; right:0px; z-index:5010;}
    }
}
.input.long{width:100%;}
.svgicons{display:none;}
.loader{margin:0 auto; width:48px; height:48px; box-sizing:border-box;}
.align-left{text-align:left; display:inline-block;}
.align-center{text-align:center; display:inline-block;}
.align-right{text-align:right; display:inline-block;}
.clear{clear:both;}
.content{display:block; max-width:1024px; margin:0 auto; padding:0 20px;}
a{font-weight:400;}
a:link, a:visited{text-decoration:none;}
a:hover, a:active{text-decoration:underline;}
.field{font-weight:400;}
.block{display:block;}
.transparent{opacity:0};
.pos-center{margin:0 auto;}
.cursor{cursor:default;}
.pointer{cursor:pointer;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* header */
header {
    .btn-boards{ white-space:nowrap;
        img{margin:2px -5px 0 -5px; width:22px; display:inline-block;}
        span{font-weight:400;}
    }

    .logo img{height:26px; margin-top:2px; opacity:0.15;}
}

/* input fields */
input[type]:not([type=button]):not([type=submit]):not([type=radio]){border-radius:3px;}
.box select{padding:6px;}
input[type="checkbox"]{width:18px !important; height:18px;}
input.label{border-style:none !important; background-color:transparent !important;}
.row.hover:hover input.label:focus{border-style:none; background-color:inherit;}
.row.hover:hover input.label.on-focus:focus, 
.row.hover input.label.on-focus:focus{border-style:none !important; outline-style:none !important; background-color:transparent !important;}
.row.hover:hover input.label.on-focus.focused:focus, 
.row.hover input.label.on-focus.focused:focus{border-style:none !important; outline-style:solid !important;}

/* buttons */
.button{font-weight:bold;
    &.small{font-size:0.8rem !important; padding:5px 10px !important;}
}
.buttons > div{float:right; margin-left:10px;}

/* popup menus */
.has-top-arrow, .has-bottom-arrow, .has-left-arrow, .has-right-arrow{border-style:solid; border-color:transparent;}

/* tabs */
.tab-content{padding:0 !important; clear:both; overflow:hidden;}
.tabs{width:100%; padding:0 13px 0 13px;
    &:after{content:''; display:block; clear:both;}
}
.tab{float:left; padding:5px 15px; margin:10px 5px 0 0; border-top-left-radius:5px; border-top-right-radius:5px; cursor:pointer;}

 /* grid items */
 .grid-items{
     @height:48px;
    .item{float:left; width:~"calc(33% - 6px)"; height:@height; box-sizing:border-box; margin:3px;}
    .item > a{width:100%; display:block; height:@height;}
    &:after{content:''; display:block; clear:both;}
    .item-title{font-weight:bold;}
    .item-subtitle{padding-top:3px;}
}

 /* messages */
 .message span{display:inline-block; width:~"calc(100% - 25px)";}
 .msg-close{vertical-align:top; position:relative; top:2px; right:-10px;}

 /* title bar */
.title-bar{padding:5px; cursor:default;
    h5{display:inline-block !important; font-size:1.2rem;}
    .owner{padding:5px 5px 0 0;}
}

/* tooltip */
.tooltip{padding:7px 15px; border-radius:7px; font-size:15px; position: relative; border-width:2px; border-style:solid;}
.tooltip:after{
    content: ''; position: absolute; display: block; width: 0; top: -12px; left: 48%;
    border-style: solid; border-width: 0 11px 11px; margin-left: -11px; z-index: 1; 
}

/* accordion */
.accordion {margin-bottom:5px;
    & > .title{padding:5px 5px 5px 10px; cursor:default;
        &  > div{margin-top:-5px; height:30px;}
        h1, h2, h3, h4, h5, h6{padding-bottom:0;}
        h6{font-weight:normal; display:inline-block;}
        .button{float:right; border-radius:6px; cursor:pointer; width:25px; height:25px; 
                margin:-2px 5px 0 0; padding:0; background:transparent; opacity:1;
            svg{width:16px;position:relative; left:5px;}
        }
        .icon{height:18px;}
        .icon.small{width:16px;}
        &  > .icon{margin-top:-2px;
            svg{width:18px;}
        }
    }
    svg.expander{transform: rotate(-90deg); margin:-3px 0 0 0; width:16px; position:relative; top:3px;}
    .contents{display:none;}
    &.expanded{
        .expander{transform: rotate(90deg);}
        .contents{display:block;}
    }
}