/* FORCE TOOL CSS v1.05 */

.clearfix:after {
    content: " ";
    display: table;
    clear: both;
}

#forceToolDemo {
    position: fixed;
    right: 0;
    top: 0;
    font-family: "Source Sans Pro";
    color: black;
    z-index: 10000;
    text-align: center;
}

#forceToolDemoBtn {
    font-size: 1em;
    position: relative;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    width: 8em;
    height: 8em;
    overflow: hidden;
}

#forceToolDemoBtn span {
    position: absolute;
    left: -0.66em;
    top: -3em;
    display: inline-block;
    font-size: 1.5em;
    width: 12em;
    text-align: center;
    padding-top: 5em;
    color: #fff;
    transform: rotate(45deg);
}

#forceToolDemoBtn.ready span {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb8c00+0,ef6c00+100 */
    background: #fb8c00; /* Old browsers */
    background: -moz-linear-gradient(45deg, #fb8c00 0%, #ef6c00 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #fb8c00 0%,#ef6c00 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #fb8c00 0%,#ef6c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb8c00', endColorstr='#ef6c00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#forceToolDemoBtn.busy span {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f44336+0,d32f2f+100 */
    background: #f44336; /* Old browsers */
    background: -moz-linear-gradient(45deg, #f44336 0%, #d32f2f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #f44336 0%,#d32f2f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #f44336 0%,#d32f2f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f44336', endColorstr='#d32f2f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    opacity: 0.5;
}

#forceToolDemoBtn:hover span {
    opacity: 1;
}

#forceToolContainer {
    /*font-family: initial;*/
    font-family: "Source Sans Pro";
    background-color: #3b3b3b;
    color: black;
    position: absolute;
    top: 8em;
    right: 0;
    z-index: 10000;
    max-width: 50%;
    min-width: 366px;
}

#forceToolContainer label,
#forceToolContainer span,
#forceToolContainer div {
    font-family: "Source Sans Pro";
}

#forceToolContainer textarea {
    text-transform: initial;
}

#forceToolContainer a {
    /*font-family: initial;*/
    font-family: "Source Sans Pro";
}

#forceToolContainer.collapsed {
    padding: 0;
    min-width: 3em;
    height: auto;
    width: auto;
}

#forceToolContainer.collapsed[data-layout="debug"] {
    top: 0;
}

#forceToolContainer.collapsed #title-text {
    display: none;
}

#forceToolContainer>#forceToolOverlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 1000;
    opacity: 0.7;
    left: 0;
}

#forceToolTitle {
    font-size: 1.5em;
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 0.7rem;
    height: 3em;
    line-height: 3em;
    color: #fff;
}

#forceToolContainer.collapsed #forceToolTitle{
    margin: 0;
}

#forceToolTitle #title-btn {
    position: absolute;
    top:0;
    right:0;
    font-size: 1.5em;
    float: right;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
}

#forceToolTitle #title-btn:hover {
    cursor: pointer;
    color: #fff;
    background: #ff0000;
}

#forceToolTitle #title-text {
    font-weight: 400;
}

#forceToolContainer.expanded #forceToolTitle #title-btn::after {
    content:"\00d7";
}

#forceToolContainer.collapsed #forceToolTitle #title-btn::after {
    content: "\25FB";
}

/*#forceToolContainer.expanded #forceToolTitle #title-text::after {
    content: 'Force Tool Sets'
}

#forceToolContainer.collapsed #forceToolTitle #title-text::after {
    content: 'FT\00A0'
}*/

#title-actions {
    float: right;
    display: inline-block;
    font-size: smaller;
    position: absolute;
    right: 4em;
}

#title-actions>a {
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    color: #ccc;
}

#title-actions>a:hover {
    color: #fff;
}

#title-actions>a.selected {
    background-color: #ccc;
    color: #000;
}

#title-actions>a.disabled {
    color: darkgray;
    cursor: default;
}

#title-actions>a.disabled:hover {
    background-color: initial;
}

#forceToolContainer.collapsed #title-actions {
    display: none;
}

#forceToolContent {
    position: relative;
    display: block;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2d2d2d+0,000000+100 */
    background: #2d2d2d; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #2d2d2d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #2d2d2d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #2d2d2d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom: 1rem;
    box-sizing: border-box;
}

#forceToolContainer.collapsed #forceToolContent {
    display: none;
}

#forceToolContainer table,
#forceToolContainer div {
    position: relative;
    z-index: 2;
}

#forceToolContainer #forceToolDemoCloseOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 1;
}

#currentForceSet {
    width: 100%;
    height: auto;
    display: none;
    padding: 0 1rem;
    box-sizing: border-box;
}

#currentForceSet>label.title {
    color: #fff;
    padding-top: 5px;
    display: block;
    font-weight: 200;
    font-size: 1.5em;
}

#currentForceSet>label.subtitle {
    display: block;
    padding-bottom: 10px;
    font-weight: 400;
    color: #bbb;
}

#divForceSetCommands {
    display: none;
    font-size:1em;
    overflow-y: auto;
    max-height: 10em;
    margin-top: 0.5rem;
    background: #fff;
    box-sizing: border-box;
    padding: 1rem;
}

#currentForceSet[data-mode="list"] #divForceSetCommands {
    display: block;
}

.no-command-item {
    background-color: silver;
    margin: 0;
    padding-left: 2px;
}

.no-cmd-cell {
    background-color: silver;
}

table  {
    border: none;
    border-collapse: collapse;
    text-align: center;
    margin: auto;
    color: #666;
}

button[data-pin-button] {
    -webkit-display: flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 2em;
    height: 1.7em;
    font-family: "Source Sans Pro";
    font-size: 2.5em;
    font-weight: 300;
    background: transparent;
    color: #bbb;
    border: none;
    outline: none;
    cursor: pointer;
}

button[data-pin-button]:active {
    background: #444;
    color: #fff;
}

button[data-pin-button="-1"] {
    color: #F57C00;
}

button[data-pin-button="-1"]:active {
    color: #fff;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9800+0,f57c00+99 */
    background: #ff9800; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ff9800 0%, #f57c00 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ff9800 0%,#f57c00 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ff9800 0%,#f57c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9800', endColorstr='#f57c00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

button[data-pin-button="-2"] {
    color: #C6FF00;
}

button[data-pin-button="-2"]:active {
    color: #fff;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c6ff00+0,90ff00+100 */
    background: #c6ff00; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c6ff00 0%, #90ff00 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c6ff00 0%,#90ff00 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c6ff00 0%,#90ff00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6ff00', endColorstr='#90ff00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#edDemoPin {
    font-family: "Source Sans Pro";
    background: transparent;
    color: #ddd;
    font-size: 3em;
    width: 6em;
    border: none;
    padding: 1rem 0;
    text-align: center;
    outline: none;
    cursor: default;
}

#edDemoPinHash {
    font-family: "Source Sans Pro";
    background: #ccc;
    color: #333;
    font-size: 1em;
    width: 17em;
    margin: 0 auto;
    border: none;
    text-align: center;
    outline: none;
}

#linkContentCurrent {
    display: none;
}

#divForceSetCommands a[data-command] {
    text-decoration: none;
    color: black;
}

#divForceSetCommands a[data-command]:hover {
    text-decoration: underline;
}

#divForceSetCommands>table {
    width: 30em;
}

#divForceSetCommands>table>tbody>tr.inactive>td {
    color: silver;
}

#divForceSetCommands>table>tbody>tr.inactive>td>a[data-command][data-commandempty="false"] {
    color: silver;
}

#divForceSetCommands>table>tbody>tr.inactive>td>div.no-command-item {
    background-color: gainsboro;
}

#divForceSetCommands>table>tbody>tr.inactive>td>div.no-command-item>a {
    color: gray !important;
}

#divForceSetCommands>table>tbody>tr>td>div.no-command-item>a {
    color: dimgray !important;
}

#divForceSetCommands>table>thead>tr>th {
    text-align: left;
    white-space: nowrap;
    border-bottom: solid 1px silver;
}

#divForceSetCommands>table>thead>tr>th:nth-child(1) {
    border-bottom: none;
}

#divForceSetCommands>table>thead>tr>th:nth-child(2) {
    text-align: center;
}

#divForceSetCommands>table>tbody>tr>td:nth-child(2) {
    text-align: right;
}

#divForceSetCommands>table>thead>tr>th:nth-child(3) {
    width: 65%;
}

#forceToolContainer[data-layout="demo"] #divForceSetCommands>table>thead>tr>th:nth-child(3) {
    width: 85%;
}

#divForceSetCommands>table>tbody>tr>td.current {
    text-align: right;
    color: #D50000;
}

#divForceSetCommands>table>tbody>tr>td.current ~ td,
#divForceSetCommands>table>tbody>tr>td.current ~ td a {
    color: #D50000;
}

#currentForceSet[data-mode="editor"] #divCommandsFooterNextCommand {
    display: none;
}

#divForceSetRawContent {
    width: 450px;
    max-width: 100%;
    height: 550px;
    display: none;
}

#currentForceSet[data-mode="editor"] #divForceSetRawContent {
    display: block;
}

#currentForceSet[data-mode="list"] #linkCommandsFooterEditCancel {
    display: none;
}

#divCommandsFooterLinks {
    position: absolute;
    top: 0;
    width: 100%;
}

#linkCommandsFooterEditRestore {
    float: left;
}

#linkCommandsFooterEdit {
    float: right;
}

#linkCommandsFooterEditCancel {
    float: right;
}

#currentForceSet[data-mode="list"] #linkCommandsFooterEditRestore {
    display: none;
}

#txtRawForceSetCommands {
    width: 100%;
    height: 100%;
    resize: none;
    font-family: monospace;
    box-sizing: border-box;
}

#currentForceSet>div.footer {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 1em;
    min-height: 2em;
}

#currentForceSet>div.footer>div:nth-child(1) {
    padding-top: 0.4rem;
    font-size: 0.8em;
    color: #fff;
    display: inline-block;
}

#currentForceSet>div.footer>div>label {
    font-size: 1.4em;
    font-weight: 300;
    display: block;
    color: #bbb;
}

#currentForceSet>div.footer a {
    text-decoration: none;
    color: #bbb;
    padding: 0.5rem 1rem;
}

#currentForceSet>div.footer a:hover {
    color: #fff;
}

#currentForceSet>div.footer a:active {
    color: #fff;
    background: #333;
}

#forceToolList {
    width: 100%;
    height: 570px;
    overflow-y: auto;
    display: block;
    box-sizing: border-box;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

#forceToolContent.current #forceToolList {
    display: none;
}

#forceToolContent.current #currentForceSet {
    display: block;
}

#forceToolList::-webkit-scrollbar,
#divForceSetCommands::-webkit-scrollbar {
    width: 0.6rem !important;
}

#forceToolList::-webkit-scrollbar-thumb,
#divForceSetCommands::-webkit-scrollbar-thumb {
    background: gray !important;
}

#forceToolList::-webkit-scrollbar-thumb:active,
#divForceSetCommands::-webkit-scrollbar-thumb:active {
    background: #3b3b3b !important;
}

#forceToolList::-webkit-scrollbar-track,
#divForceSetCommands::-webkit-scrollbar-track {
    background: silver !important;
}

#forceToolList label.category {
    font-family: "Source Sans Pro";
    font-weight: 400;
    color: #bbb;
}

#forceToolList ul {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

#forceToolList ul li {
    margin-top: 0.4rem;
}

#forceToolContainer ul li button {
    width: 100%;
    height: auto;
    min-height: 4em;
    font-size: 1em;
    border: none;
    text-align: left;
    padding: 0.5em;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,cecece+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ffffff 1%, #cecece 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ffffff 1%,#cecece 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ffffff 1%,#cecece 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    outline: none;
}

#forceToolContainer ul li button:hover {
    background: #fff;
}

#forceToolContainer ul li button:active {
    background: #ccc;
}

#forceToolContainer ul li button span.name {
    display: block;
    position: relative;
    top: -0.2rem;
    font-weight: 700;
    font-size: 1.5em;
    font-family: "Source Sans Pro";
    overflow: hidden;
}

#forceToolContainer ul li button span.description {
    display: block;
    position: relative;
    font-style: italic;
    font-size: 1.2em;
}

/* MEDIA QUERIES */

/*------- mobile layout --------*/

@media (max-width:50.06em) {
    #forceToolDemo {
        font-size: 7px;
    }

    #forceToolContainer {
        font-size: 12px;
        width: 65%;
        max-width: none;
        min-width: 0;
    }

    #forceToolList {
        height: 30em;
    }
}

@media (min-width:20em) {
    #forceToolDemo {
        font-size: 5px;
    }

    #forceToolContainer {
        font-size: 5px;
    }

    #divForceSetRawContent {
        max-height: 5em;
    }
}

@media (min-width:20em) and (min-height: 15em) {
    #forceToolDemo {
        font-size: 7px;
    }

    #forceToolContainer {
        font-size: 7px;
    }

    #divForceSetRawContent {
        max-height: 6em;
    }
}

@media (min-width:30.06em) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    #forceToolDemo {
        font-size: 8px;
    }

    #forceToolContainer {
        font-size: 8px;
    }
}

@media (min-width:30.06em) and (min-height: 20em) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    #forceToolDemo {
        font-size: 9px;
    }

    #forceToolContainer {
        font-size: 11px;
    }

    #divForceSetRawContent {
        max-height: 18em;
    }
}

@media (min-width:40.06em) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    #forceToolDemo {
        font-size: 9px;
    }

    #forceToolContainer {
        font-size: 9px;
    }

    #forceToolTitle {
        height: 2em;
        line-height: 2em;
    }

    #forceToolTitle #title-btn {
        font-size: 1em;
    }

    #title-actions {
        right: 3em;
    }
}

@media (min-width:40.06em) and (min-height:22em) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    #forceToolDemo {
        font-size: 9px;
    }

    #forceToolContainer {
        font-size: 11px;
    }

    #divForceSetRawContent {
        max-height: 20em;
    }
}

/*------- desktop layout --------*/

@media (pointer: fine) and (min-width:50.06em) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    #forceToolDemo {
        font-size: 10px;
    }

    #forceToolContainer {
        font-size: 11px;
    }

    #forceToolList {
        height: 34em;
    }
}
@media (pointer: fine) and (min-width:60.06em) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    #forceToolDemo {
        font-size: 11px;
    }

    #forceToolContainer {
        font-size: 12px;
    }
}
@media (pointer: fine) and (min-width:64.06em) {
    /* big landscape tablets, laptops, and desktops */
    #forceToolDemo {
        font-size: 12px;
    }

    #forceToolContainer {
        font-size: 13px;
    }
}
@media (pointer: fine) and (min-width:80.06em) {
    #forceToolDemo {
        font-size: 14px;
    }

    #forceToolContainer {
        font-size: 15px;
    }
}

@media (pointer: fine) and (min-width:90.06em) {
    #forceToolDemo {
        font-size: 15px;
    }

    #forceToolContainer {
        font-size: 15px;
    }
}

@media (pointer: fine) and (min-width:120em) {
    #forceToolDemo {
        font-size: 18px;
    }

    #forceToolContainer {
        font-size: 18px;
    }
}

/* Mobile landscape */
@media (pointer:coarse) and (orientation: landscape), (min-resolution: 120dpi) and (orientation: landscape) {
    #forceToolContainer {
        top: 0;
        height: 100%;
    }

    #forceToolContent {
        height: calc(100% - 4.5em);
    }

    #forceToolList {
        height: 100%;
    }
}