.template{
    display: none;
}
.amino-datagrid{
    width: 100%;
    input{
        box-sizing: border-box;
    }
    > table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0px;
        table-layout: fixed;
        font-size: 14px;
        > thead {
            > tr {
                height: 30px;
                background-color: rgb(238, 238, 238);
                background-image: -webkit-linear-gradient(top, rgb(242, 242, 242) 0px, rgb(250, 250, 250) 100%);
                &.search-row{
                    input, select{
                        font-size: 14px;
                    }
                }
                > td {
                    font-weight: bold;
                    > input.filterInput{
                        width: 100%;
                        font-weight: bold;
                    }
                    > select.filterSelect{
                        height: 1.8em;
                        font-size: 1em;
                    }
                    &.sortable{
                        cursor: pointer;
                    }
                    &.sort-icon-asc::after{
                        content: "\25b2";
                    }
                    &.sort-icon-desc::after{
                        content: "\25bc"
                    }
                }
            }
        }
        > tbody {
            > tr.datagrid-row{
                height: 30px;
                background-color: #fff;
                > td{
                    button{
                        background-color: #c5dbec;
                        background-color: #dfeffc;
                        background-color: #E6E6E6;
                        font-weight: normal;
                        font-size: 13px;
                        color: #2e6e9e;
                        color: #444;
                        padding: 0px auto;
                        height: 1.9em;
                    }
                }
                &:hover{
                    background-color: #ECF3F8;
                    background-color: #f4f4f4;
                }
                &:selected{
                    background-color: #FFFFCC;
                }
            }
        }
        td{
            border: 1px solid #ddd;
            box-sizing: border-box;
            padding: 0px 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.amino-display-control-wrapper {
    .amino-display-control-item{
        display: inline-block;
        .amino-checkbox{
            margin: 0px 10px 0px 5px;
            .amino-checkbox-tick{
                font-size: 12px;
                padding: 5px;
            }
        }
        .amino-diaplay-control__text {
            font-weight: bold;
        }
    }
}
.amino-paging {
    font-size: 12px;
    input {
        width: 100%;
        height: 2em;
        border: 1px solid #A9A9A9;
        color: #333;
        background-color: #fff;
    }
    > .pageSwitch{
        display: inline-block;
        padding: 0px 5px;
        > input[name=currentPage]{
            text-align: center;
            margin: 0px 5px;
            width: 40px;
        }
    }
    > .paging-pagination {
        margin-top: 3px;
        span{
            font-weight: bold;
        }
    }
}
.amino-captioned-container{
    background-color: #EEEFEF;
    &.maximize{
        z-index: 9999;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        ~ div {
            display: none;
        }
        > div.caption{
            > .btn-normalize-from-min, >.btn-maximize{
                display: none;
            }
        }
    }
    &.normalize{
        > div.caption{
            >.btn-normalize-from-max, >.btn-normalize-from-min{
                display: none;
            }
        }
    }
    &.minimize{
        > .panel{
            display: none;
        }
        > div.caption{
            > .btn-minimize, >.btn-normalize-from-max{
                display: none;
            }
        }
    }
    > div.caption{
        width: 100%;
        position: relative;
        z-index: 1;
        padding-left: 10px;
        box-sizing: border-box;
        background-color: #353D4B;
        color: #fff;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        >.btn-minimize, >.btn-normalize-from-min, > .btn-maximize, > .btn-normalize-from-max, > .btn-close{
            display: inline-block;
            width: 20px;
            height: 20px;
            box-sizing: border-box;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            position: absolute;
            top: 8px;
            right: 8px;
            color: #353D4B;
            cursor: pointer;
            text-align: center;
            line-height: 20px;
            font-family: Segoe UI Symbol;   // prevent from unicode characters become emoji
        }
        >.btn-minimize, >.btn-normalize-from-min{
            line-height: 18px;
            right: 36px;
        }
    }
    > div.panel{
        background-color: #fff;
        border: 1px solid #ccc;
        border-bottom-width: 2px;
        padding: 1px 15px 15px 15px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.amino-widget-menu{
    > .category{
        color: #fff;
        > .title{
            padding-left: 10px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
        > .children{
            background-color: #22262E;
            background-color: #252932;
            padding: 8px 0px;
            > .item {
                text-decoration: none;
                > .title{
                    color: #fff;
                    padding-left: 30px;
                    height: 35px;
                    line-height: 35px;
                    font-size: 15px;
                    cursor: pointer;
                    white-space: nowrap;
                    &:hover{
                        background-color: #1b1e24;
                    }
                }
            }
        }
    }
}
.amino-tabs{
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    > .tab-btn{
        display: inline-block;
        font-size: 16px;
        border: 1px solid #999;
        margin: 0px 0px -1px 5px;
        height: 30px;
        padding: 0 10;
        line-height: 30px;
        cursor: pointer;
        background-color: rgb(238, 238, 238);
        background-image: -webkit-linear-gradient(top, rgb(242, 242, 242) 0px, rgb(250, 250, 250) 100%);
        &.active{
            border-bottom: 1px solid #EEEFEF;
            font-weight: bold;
            background-image: none;
        }
    }
}
.amino-tags{
    width: 100%;
    min-height: 2em;
    font-size: 16px;
    border: 1px solid #A9A9A9;
    color: #333;
    background-color: #fff;
    > span{
        background-color: #353D4B;
        color: #fff;
        font-size: 0.85em;
        padding: 2px 8px;
        border-radius: 4px;
        margin: 3px 0px 3px 3px;
        vertical-align: top;
        display: inline-block;
        > span {
            padding-left: 7px;
            cursor: pointer;
        }
    }
    > input[type=text]{
        border: 0;
        outline: 0;
        font-size: 0.9em;
        background-color: transparent;
        width: auto;
    }
}
.amino-tooltip-content-wrapper{
    border: 1px solid #A9A9A9;
    border-radius: 4px;
    position: absolute;
    background-color: #fff;
    padding: 5px 10px;
    display: none;
    z-index: 10300;
    &:before{
        content: "";
        position: absolute;
        margin-top: 0;
    }
    &.top:before{
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        top: 100%;
        left: 50%;
        margin-left: -10px;
        border-top: 10px solid #A9A9A9;
    }
    &.bottom:before{
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        top: -10px;
        left: 50%;
        margin-left: -10px;
        border-bottom: 10px solid #A9A9A9;
    }
    &.left:before{
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        top: ~"calc(50% - 10px)";
        right: 0;
        margin-right: -10px;
        border-left: 10px solid #A9A9A9;
    }
    &.right:before{
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        top: ~"calc(50% - 10px)";
        left: 0;
        margin-left: -10px;
        border-right: 10px solid #A9A9A9;
    }
}
.amino-form-tooltip .amino-tooltip-content-wrapper{
    font-size: 12px;
    &.alert-warning{
        border-color: #cccc2e;
        &.top:before{
            border-top-color:#cccc2e;
        }
        &.bottom:before{
            border-bottom-color:#cccc2e;
        }
        &.left:before{
            border-left-color:#cccc2e;
        }
        &.right:before{
            border-right-color:#cccc2e;
        }
    }
    &.top:before{
        margin-bottom: -7px;
        border-top-width: 7px;
    }
    &.bottom:before{
        top: -7px;
        border-bottom-width: 7px;
    }
    &.left:before{
        margin-right: -7px;
        border-left-width: 7px;
    }
    &.right:before{
        margin-left: -7px;
        border-right-width: 7px;
    }
    .warning-sign {
        width: 12px;
    }
}
.amino-split-view{
    .amino-split-view-main{
        width: 70%;
        display: inline-block;
        vertical-align: top;
    }
    .amino-split-view-links-container{
        width: 30%;
        display: inline-block;
        vertical-align: top;
        .amino-split-view-links{
            border-left: 1px solid gray;
            margin-left: 20px;
            padding-left: 10px;
            padding-bottom: 40px;
            .link{
                margin: 7px 0px;
                display: block;
                text-decoration: none;
                color: inherit;
                &.active{
                    font-weight: bold;
                }
                &.disabled{
                    cursor: default;
                    color: #949494;
                }
            }
        }
    }
}
.amino-modal{
    z-index: 10200;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: none;
    background-color: rgba(0,0,0,0.6);
    .amino-modal-content-wrapper{
        margin: 0px auto;
        height: 100%;
        &::before{
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
    }
    .amino-captioned-container{
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
}
.amino-modalBox{
    .amino-modal{
        .amino-modal-box-wrapper{
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
.amino-checkbox{
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
    .amino-checkbox-tick{
        top: 0;
        padding: 5px 10px;
        cursor: pointer;
        color: transparent;
    }
    input{
        display: none;
        &:checked + .amino-checkbox-tick{
            color: #000;
        }
        &:disabled + .amino-checkbox-tick{
            background-color: #f0f0f0;
            cursor: auto;
        }
        &.alert-danger + .amino-checkbox-tick{
            border-color: #ebccd1 !important;
            background-color: #f2dede !important;
        }
    }
}
.amino-flip-switch > label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 40px;
    height: 1em;
    font-size: 18px;
    .amino-flip-switch__checkbox {
        display: none;
        &:checked {
            &~ .amino-flip-switch__background {
                background-color: #09A003;
            }
            &~ .amino-flip-switch__circle {
                right: 0 !important;
            }
        }
    }
    .amino-flip-switch__background {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1em;
        background-color: #ccc;
        transition: 0.2s;
    }
    .amino-flip-switch__circle {
        position: absolute;
        width: 0.8em;
        height: 0.8em;
        margin: 0.1em;
        right: ~"calc(100% - 1em)";
        border-radius: 50%;
        background-color: white;
        transition: 0.2s;
    }
}
.amino-multipleSelectModal{
    .amino-modal-content-wrapper{
        width: 500px;
        height: 100%;
    }
    .select-box{
        padding-bottom: 10px;
    }
    .options-panel{
        min-height: 400px;
    }
    .option-item{
        .icon-added{
            visibility: hidden;
            padding: 0px 3px;
        }
        &[added]{
            background-color: #ebebeb;
            .icon-added{
                visibility: visible;
            }
        }
        &[checked] .icon-added{
            visibility: visible;
        }
    }
    .right-button{
        float: right;
    }
}
.amino-removableLabelList{
    .list-item{
        display: inline-block;
        position: relative;
        margin: 5px 0;
        padding-right: 20px;
        .btn-remove{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 35px;
            color: red;
        }
        .item-label{
            margin-left: 45px;
            line-height: 2em;
        }
    }
}
.amino-form{
    .info-sign{
        font-size: 12px;
    }
}
.amino-button-set {
    min-width: 340px;
    button {
        display: inline-block;
        border: 1px solid #CCCCCC;
        background-color: white;
        color: black;
        padding: 5px;
        cursor: pointer;
        &:not(:last-child) {
            border-right: none;
        }
        &:hover {
            background-color: #E6E6E6;
        }
        &.active {
            background-color: #E6E6E6;
        }
    }
}

/* TODO: tidy up this block */
.amino-widget-dropdownSelect{
    position: relative;
    overflow: visible;
}
.amino-widget-select > input,
.amino-widget-dropdownSelect > input{
    box-sizing: border-box;
    width: 100%;
    padding-right: 20px;
}
.amino-widget-dropdownSelect .btn-down-arrow{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom:0px;
    width: 20px;
    text-align: center;
    cursor: pointer;
}
.amino-widget-dropdownSelect .btn-down-arrow::before{
    content: "";
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
.amino-widget-dropdownSelect .btn-down-arrow::after{
    content: "\25be"; /* down triangle ▾ */
    vertical-align: middle;
}
.amino-widget-select .options-panel{
    border: 1px solid #A9A9A9;
    width: 100%;
    background-color: #fff;
    max-height: 300px;
    overflow-y: auto;
}
.amino-widget-dropdownSelect .options-panel{
    display: none;
    border: 1px solid #A9A9A9;
    position: absolute;
    left: 0px;
    width: 100%;
    background-color: #fff;
    z-index: 1; /* beat the floaters */
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.amino-widget-dropdownSelect .tag-options-panel{
    width: ~"calc(100% + 2px)";
    margin: 2px 0px 0px -1px;
}
.amino-widget-list .legend,
.amino-widget-select .options-panel .legend,
.amino-widget-select .options-panel .legend,
.amino-widget-dropdownSelect .options-panel .legend{
    font-weight: bold;
    margin-left: 5px;
    margin-top: 5px;
}
.amino-widget-list hr,
.amino-widget-select .options-panel hr,
.amino-widget-dropdownSelect .options-panel hr{
    margin: 5px 0px;
    border-color: #999;
}
.amino-widget-list .option-item,
.amino-widget-select .options-panel .option-item,
.amino-widget-dropdownSelect .options-panel .option-item{
    margin-left: 5px;
    margin-right: 5px;
    height: 2em;
    line-height: 2em;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.amino-widget-select .options-panel .option-item-inner{
    padding-left: 2em !important;
    font-size: 14px !important;
    color: #444 !important;
}
.option-item-right{
	float: right;
    font-size: 0.7em;
    padding: 0 5px;
    color: #4d4d4d;
}
.select-input-box-right{
	font-size: 0.8em;
    padding-right: 26px;
    color: #4d4d4d;
    position: absolute;
    right: 0;
    top: 33%;
}
.amino-widget-list .option-item.disabled,
.amino-widget-select .options-panel .option-item.disabled,
.amino-widget-dropdownSelect .options-panel .option-item.disabled{
    cursor: default;
    color: graytext;
}
.amino-widget-list .option-item.disabled:hover,
.amino-widget-select .options-panel .option-item.disabled:hover,
.amino-widget-dropdownSelect .options-panel .option-item.disabled:hover{
    background-color: inherit;
}
.amino-widget-list .option-item strong,
.amino-widget-select .options-panel .option-item strong,
.amino-widget-dropdownSelect .options-panel .option-item strong{
    background-color: yellow;
}
.amino-widget-list .option-item:hover,
.amino-widget-select .options-panel .option-item:hover,
.amino-widget-dropdownSelect .options-panel .option-item:hover{
    background-color: #EBF2F9;
}
.amino-datetimepicker{
    .amino-datetimepicker__container{
        position: relative;
        width: 100%;
    }
    .amino-datetimepicker__datepicker{
        position: absolute;
        left: 0;
        visibility: hidden;
    }
}
.amino-widget-treeHierarchyList ul {
    position: relative;
    padding: 0;
    list-style: none;
}
.amino-widget-treeHierarchyList li {
    position: relative;
    padding: 0 0.43em 0 1.875em;  /* relative to it's font size */
}
.amino-widget-treeHierarchyList ul > li:not(.amino-tree-hierarchy-list__list-item--last-child) {
    border-left: #c6c6c6 solid 1px;
}
.amino-widget-treeHierarchyList ul > li:before {
    content: '';
    position: absolute;
    width: 1.5em;
    height: 1em;
    left: 0;
    border-bottom: #c6c6c6 solid 1px;
}
.amino-widget-treeHierarchyList ul > li.amino-tree-hierarchy-list__list-item--parent:before {
    width: .4em;  /* leave space for expand/collapse arrow */
}
.amino-tree-hierarchy-list__list-item--last-child:before {
    border-left: #c6c6c6 solid 1px;
}
.amino-widget-treeHierarchyList li > div {
    position: relative;
    white-space: nowrap;
    cursor: pointer;
}
.amino-widget-treeHierarchyList li > div:hover,
.amino-tree-hierarchy-list__list-item--selected > div {
    background-color: #EBF2F9;
}
.amino-tree-hierarchy-list__list-item--parent > div:before {
    position: absolute;
    content: '\25BE';
    left: -1.25em;
}
.amino-tree-hierarchy-list__list-item--parent.amino-tree-hierarchy-list__list-item--expanded > div:before {
    content: '\25B4';
}
.amino-widget-treeHierarchyList li > div > span.name-label mark {
    font-weight: bold;
}

.amino-widget-splitSelect{
    span.sortable{
        cursor: pointer;
        display:block;
    }
    .sort-icon-asc::after{
        content: "\25b2";
    }
    .sort-icon-desc::after{
        content: "\25bc"
    }
}
.amino-tooltip-content {
	text-align: left;
    margin-top: 0.5em;
}
.amino-tooltip-span-item {
	border: 1px solid #eee;
    border-radius: 2px;
    padding: .2em 0.4em;
    display: inline-block;
    margin: 0 0.5em 0.3em 0;
}
.amino-tooltip-list-head {
	border-bottom: 1px solid #777;
    font-weight: bold;
    padding: 0.3em 2em 0 0;
    text-align: left;
}
.amino-list-item-remark {
	font-size: 10px;
    color: #4d4d4d;
    line-height: 10px;
}
.amino-disable {
    pointer-events: none;
    opacity: 0.4;
}