/* Minification failed. Returning unminified contents.
(764,27): run-time error CSS1046: Expect comma, found '0'
(764,31): run-time error CSS1046: Expect comma, found '/'
(771,27): run-time error CSS1046: Expect comma, found '0'
(771,31): run-time error CSS1046: Expect comma, found '/'
(778,27): run-time error CSS1046: Expect comma, found '0'
(778,31): run-time error CSS1046: Expect comma, found '/'
 */
/*this is needed for the #actionBackground to work with negative z-index*/
body.surfaceEditMode {
    position: relative;
    z-index: 0;
}

#actionBackground {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('/Areas/Surface/assets/img/bg01_linen.png');
    background-repeat: repeat;
    /*opacity: 0.2;*/
    /*background-color: #ff0000aa;*/
}

.align-selector i {
  display: none;
}

.align-selector.left #as-left {
  display: initial;
}

.align-selector.center #as-center {
  display: initial;
}

.align-selector.right #as-right {
  display: initial;
}

.align-selector.justify #as-justify {
  display: initial;
}


.action-button-create {
  width: 30px;
  height: 30px;
  color: #777;
  background-color: #eee;
  border-radius: 3px;
  float: left;
  cursor: pointer;
  text-align: center;
  line-height: 0px;
  padding-top: 1px;
  font-size: 26px;
  margin: 0px 3px 0px 0px;
}

.action-button-create:hover {
  color: white;
  background-color: #0079bf;
}

.action-button-create span {
  line-height: 0;
  display: inline-block;
  padding-top: 11px;
}

.action-button-create-menu {
  float: right;
  margin-right: 6px;
  margin-left: 9px;
}

#openFullMenu.action-button-create {
    font-size: 20px;
    padding-top: 4px;
    /*box-shadow: rgb(189 189 189) 0px 0px 0px 0px;*/
    width: 57px;
}


.action-button.selectable.disabled {
  cursor: auto;
  pointer-events: none;
}

.action-button.selectable.disabled i {
  color: #d9d9d9;
  font-weight: 100;
}

.action-button.selectable.disabled:hover {
  background-color: #eee;
}

.selectable.light i {
  color: #989898;
}

.selectable.light.selected i {
  color: #fff;
}


.action-button.web {
  /*border: 1px solid #fff;*/
  box-shadow: #aaa 2px 2px 4px;
  margin-top: 5px;
  margin-bottom: 8px;
  margin-right: 6px;
}

.web.unsaved {
  background-color: #f08475;
  color: #fceae8;
  box-shadow: #f08475 2px 2px 4px;
}

.web.unsaved:hover {
  background-color: #eb5a46;
}

.web.private {
  background-color: #f08475;
  color: #fceae8;
  box-shadow: #f08475 2px 2px 4px;
}

.web.private:hover {
  color: #fceae8;
  background-color: #eb5a46;
}

.web.public {
  background-color: #70b500;
  color: #f5ffe6;
  box-shadow: #70b500 2px 2px 4px;
}

.web.public:hover {
  background-color: #5e9900;
  color: #f5ffe6;
}

.web.disabled, .web.disabled:active, .web.disabled:hover {
  color: #b1b1b1;
  background-color: #d7d7d7;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}


.web.active {
    background-color: #0079bf;
    color: white;
}

    .web.active:hover {
        /*color: #777;*/
        color: white;
        background-color: #0d47a1;
    }

    #view3D.action-button i{
        font-weight: normal;
    }
.action-button {
    margin: 0px 3px 3px 0px;
    width: 28px;
    height: 28px;
    background-color: #eee;
    /*border: 1px solid #eee;*/
    cursor: pointer;
    text-align: center;
    line-height: 0px;
    padding-top: 5px;
    font-size: 16px;
    color: #777;
    border-radius: 5px;
    float: left;
}

    .action-button:hover {
        background-color: #ddd;
    }

    .action-button.selectable {
        color: #777;
    }

        .action-button.selectable.selected, .action-button:active {
            color: #555;
            /*border-color: #bbb;*/
            background-color: #ccc;
        }

    .action-button span {
        line-height: 0;
        display: inline-block;
        padding-top: 8px;
    }

    .action-button i {
        font-weight: bold;
    }


    .action-button.pale {
        opacity: 0.4;
    }
    .action-button.pale:hover {
        opacity: 1;
    }


.action-button-3D {
    width: 60px;
    height: 60px;
    cursor: grab;
    padding-top: 16px;
}

    .action-button-3D i {
        font-size: 30px;
        font-weight: normal;
    }

    .action-button-3D.active {
        background-color: #0079bf;
        color: white;
    }

        .action-button-3D.active:hover {
            color: white;
            background-color: #0d47a1;
        }

.media-query-container {
    width: 100%;
    height: 60px;
    background-color: #c7c7c780;
    position: fixed;
    left: 0px;
    /*bottom: -50px;*/
    bottom: 0px;
}

.btn-media-query-plus {
    width: 38px;
    height: 31px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(34, 34, 34);
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

    .btn-media-query-plus:hover {
        background-color: rgb(0, 121, 191);
        color: rgb(255, 255, 255);
        border-color: rgb(13, 71, 161);
    }

.btn-media-query {
    width: 71px;
    height: 31px;
    font-size: 14px;
    color: rgb(34, 34, 34);
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 4px;
    border-radius: 4px 0px 0px 4px;
    cursor: pointer;
}

.btn-media-query-complex:hover,
.btn-media-query-complex.currentWidthWorkingOn {
    z-index: 1;
}

    .btn-media-query:hover,
    .btn-media-query-complex.currentWidthWorkingOn .btn-media-query {
        background-color: rgb(0, 121, 191);
        color: rgb(255, 255, 255);
    }

.btn-media-query-delete {
    width: 34px;
    height: 31px;
    font-size: 17px;
    color: rgb(34, 34, 34);
    background-color: rgb(255, 255, 255);
    text-align: center;
    cursor: pointer;
    border-radius: 0px 4px 4px 0px;
    padding: 2px;
    border-left: 1px solid rgb(85, 85, 85);
}

    .btn-media-query-delete:hover {
        background-color: rgb(235, 90, 70);
        color: rgb(255, 255, 255);
    }

.btn-media-query-bar {
    width: 3px;
    height: 60px;
    background-color: rgb(199, 199, 199);
    float: left;
    margin-left: 14px;
    margin-top: -14px;
}


.btn-media-query-complex {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

    .btn-media-query-complex.currentScreen {
        font-weight: bold;
    }

#currentWindowWidthLabel {
    color: #ffffff80; /*with 0.5 alpha*/
    font-size: 14px;
    font-style: italic;
}

#currentWidthToWorkOnLabel {
    color: #0d47a180; /*with 0.5 alpha*/
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

.advancedMenuContainer {
    width: 750px;
    height: 550px;
    background: #ffffffe6;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 1px #1111112b;
    position: fixed;
    top: 10px;
    right: 300px;
    z-index: 20;
}

    .advancedMenuContainer .action-button {
        margin: 0px;
    }

    .advancedMenuContainer .disabled {
        pointer-events: none;
        opacity: 0.5;
    }

.amcLabel {
    font-size: 11px;
    color: #777;
    height: 20px;
}

.menuTab {
    width: 80px;
    height: 28px;
    background: #ffffff;
    background-color: white;
    box-shadow: inset 0px 0px 4px 0px #979797;
    float: left;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
    font-size: 11px;
    color: #777;
}

    .menuTab:hover, .menuTab.active, .menuTab.whiteSpace {
        box-shadow: none;
        font-weight: bold;
    }

.menuTabCornerButton {
    width: 28px;
    height: 28px;
    box-shadow: none;
    background-color: #f5f5f5;
    float: right;
    border-radius: 0px 5px 0px 5px;
    text-align: center;
    color: #777777;
    line-height: 14px;
}

    .menuTabCornerButton:hover {
        background-color: #c7c7c7;
    }

    .menuTabCornerButton.resize {
        padding-top: 7px;
        border-radius: 5px 0 5px 0px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        cursor: nwse-resize;
    }

.menuBody {
    float: left;
    /*background-color: red;*/
    width: 100%;
    height: 80%;
    margin-top: 14px;
    padding: 0px 10px 10px 10px;
}

    .menuBody textarea {
        width: 100%;
        height: 99%;
        resize: none;
        font-size: 12px;
        /*matching highlight JS*/
        padding-top: 13px;
        padding-left: 11px;
        background-color: #1e1e1e;
        color: #9f9f9f; /*#ebcec2; /*#d69d85*/
        font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    }

    .menuBody table {
        width: 100%;
    }

        .menuBody table tr:first-child td {
            padding-top: 0px;
        }

        .menuBody table tr td {
            /*border: 1px solid black;*/
            padding-top: 10px;
        }

        .menuBody table input:not([type='checkbox']) {
            width: 98%;
        }

.menuFooter {
    width: 100%;
    height: 50px;
    background: #ffffffe6;
    /*background-color: white;*/
    display: flex;
    flex-direction: row-reverse;
    border-radius: 0px 0px 5px 5px;
    box-shadow: 0px 0px 3px rgb(170,170,170);
}

.addRemoveAttribute {
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: #e5e5e5;
    cursor: pointer;
}

    .addRemoveAttribute:hover {
        background-color: #c7c7c7;
    }

/*aceEditor stuff*/
#htmlMenuBodySyntax,
#htmlMenuBodyEditSyntax,
#styleMenuBodySyntax,
#cssMenuBodySyntax {
    height: 80%;
    width: 100%;
    position: absolute;
    top: 44px;
    left:0px;
    background-color: rgb(36, 41, 46);
    font-size: 12px;
    color: white
}

/*behavioral stuff*/
.am-attribute-row.disabled {
    opacity: 0.5;
    pointer-events: none;
    display: none;
}

/*button to select stuff*/
.advancedMenuSelector {
    height: 25px;
    font-size: 12px;
    color: rgb(255, 255, 255);
    background-color: rgb(163, 163, 163);
    text-align: center;
    border-radius: 3px;
    margin: 0px 17px 17px 0px;
    padding: 2px 12px 10px 10px;
    /**/
    float: left;
}

    .advancedMenuSelector:hover {
        background-color: rgb(135, 135, 135);
    }

    .advancedMenuSelector.active {
        background-color: rgb(0, 121, 191);
    }

        .advancedMenuSelector.active:hover {
            background-color: rgb(13, 71, 161);
        }

.advancedMenuSelectorLabel {
    height: 27px;
    font-size: 12px;
    color: rgb(150, 150, 150);
    font-style: italic;
    /**/
    float: left;
    position: relative;
    top: 3px;
}

.advancedMenuSelectorCopy {
    position: absolute;
    bottom: 90px;
    left: 10px;
    opacity: 0.5;
    z-index:10;
}

.advancedMenuSelectorCopy:hover {
    opacity: 1;
}
/*Interactivity*/
.stateContainer {
    position: relative;
    width: 100px;
    height: 140px;
}

/*Media queries*/
.mediaQueryButton {
    width: 270px;
    height: 31px;
    font-size: 14px;
    color: rgb(34, 34, 34);
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 2px;
    border-radius: 4px;
    border-color: rgb(170, 170, 170);
    border-width: 1px;
    border-style: solid;
    margin-bottom: 21px;
    margin-left: 20px;
    margin-top: 13px;
    float: left;
    cursor: pointer;
}

    .mediaQueryButton:hover {
        background-color: rgb(0, 121, 191);
        color: rgb(255, 255, 255);
        border-color: rgb(13, 71, 161);
    }

.mediaQueryDeleteButton {
    width: 29px;
    height: 31px;
    font-size: 14px;
    color: rgb(34, 34, 34);
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 2px;
    border-radius: 4px;
    border-color: rgb(170, 170, 170);
    border-width: 1px;
    border-style: solid;
    margin-left: 10px;
    margin-top: 13px;
    float: left;
    cursor: pointer;
}

    .mediaQueryDeleteButton:hover {
        background-color: rgb(235, 90, 70);
        border-color: rgb(204, 0, 0);
        color: rgb(255, 255, 255);
    }


/*Labels*/
.onEventLabel {
    width: 130px;
    height: 47px;
    font-size: 15px;
    color: rgb(140, 140, 140);
    font-style: italic;
    font-weight: bold;
    text-align: right;
}

.minorLabel {
    width: 147px;
    height: 59px;
    font-size: 12px;
    color: rgb(140, 140, 140);
    text-align: left;
}

/*buttons*/
.surfaceStateButton.small {
    height: 23px;
    width: 82px;
    font-size: 12px;
    padding: 0px;
}

.surfaceStateButton {
    height: 35px;
    width: 142px;
    font-size: 15px;
    color: rgb(51, 51, 51);
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 4px;
    border-radius: 3px;
    border: 1px solid rgb(170, 170, 170);
    cursor: pointer;
}

    .surfaceStateButton:hover {
        background-color: #ebebeb;
    }

    .surfaceStateButton.active {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 121, 191);
        font-weight: bold;
        border: none;
    }

        .surfaceStateButton.active:hover {
            background-color: rgb(13, 71, 161);
        }


.stateToggleButton {
    width: 65px;
    height: 20px;
    font-size: 10px;
    color: rgb(34, 34, 34);
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-color: rgb(168, 168, 168);
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    padding: 1px;
}

    .stateToggleButton:hover {
        background-color: rgb(235, 235, 235);
    }

    .stateToggleButton.active {
        background-color: #c5c5c5;
        color: #585858;
        font-weight: bold;
    }

        .stateToggleButton.active:hover {
            background-color: #aaa;
        }



/*state numbers table*/
.stateNumberContainer {
    width: 330px;
    height: 60px;
    background: #ebebeb;
    border-radius: 5px;
}

    .stateNumberContainer table, tr, td {
        width: 300px;
        border-collapse: collapse;
    }

    .stateNumberContainer .surfaceStateNumber {
        width: 30px;
        height: 30px;
        background: #ffffff;
        outline: 1px solid #c7c7c7;
        float: left;
        text-align: center;
        padding-top: 2px;
        color: #777;
        cursor: pointer;
    }

.surfaceStateNumber:hover {
    background-color: #ebebeb;
    font-weight: bold;
}

.surfaceStateNumber.active {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 121, 191);
    font-weight: bold;
}

    .surfaceStateNumber.active:hover {
        background-color: rgb(13, 71, 161);
    }

.surfaceStateNumber.stateZero {
    height: 60px;
    width: 30px;
    padding-top: 16px;
    float: left;
}

.surfaceStateNumber.stateNotAvailable {
    opacity: 0.5;
    pointer-events: none;
}

/*end Interactivity*/

/*Feature Toggles*/
#featuresMenuBody td {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-bottom: 7px;
}

.wdsAlert {
    width: 207px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    padding: 9px;
    position: absolute;
    top: 0px;
    right: 267px;
}

    .wdsAlert.wdsInfo {
        background-color: rgb(0, 121, 191);
        border-color: rgb(0, 146, 231);
        /*box-shadow: rgb(0, 121, 191) 10px 10px 30px 0px;*/
        box-shadow: rgb(0 0 0 / 45%) 10px 10px 30px 0;
    }

    .wdsAlert.wdsWarning {
        background-color: rgb(255, 159, 26);
        border-color: rgb(255, 185, 86);
        /*box-shadow: rgb(255,168,46) 10px 10px 30px 0px;*/
        box-shadow: rgb(0 0 0 / 45%) 10px 10px 30px 0;
    }

    .wdsAlert.wdsDanger {
        background-color: rgb(235, 90, 70);
        border-color: rgb(239, 130, 115);
        /*box-shadow: rgb(237,106,88) 10px 10px 30px 0px;*/
        box-shadow: rgb(0 0 0 / 45%) 10px 10px 30px 0;
    }

    .wdsAlert .btn {
        font-size: 14px;
        /*font-weight: bold;*/
        line-height: 1;
        color: rgb(34, 34, 34);
        text-align: center;
        background-color: rgb(238, 238, 238);
        border-radius: 3px;
        cursor: pointer;
        padding-left: 8px;
        padding-right: 8px;
    }

        .wdsAlert .btn:hover {
            background-color: rgb(221, 221, 221);
        }

.wdsAlert {
    width: 207px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    padding: 9px;
    position: absolute;
    top: 0px;
    right: 267px;
}

    .wdsAlert.wdsInfo {
        background-color: rgba(0, 121, 191, 0.5);
        border-color: rgb(0, 146, 231);
        /*box-shadow: rgb(0, 121, 191) 10px 10px 30px 0px;*/
        box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 30px 0;
    }

    .wdsAlert.wdsWarning {
        background-color: rgba(255, 159, 26, 0.5);
        border-color: rgb(255, 185, 86);
        /*box-shadow: rgb(255,168,46) 10px 10px 30px 0px;*/
        /*box-shadow: rgb(0 0 0 / 45%) 10px 10px 30px 0;*/
        box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 30px 0;
    }

    .wdsAlert.wdsDanger {
        background-color: rgba(235, 90, 70, 0.5);
        border-color: rgb(239, 130, 115);
        /*box-shadow: rgb(237,106,88) 10px 10px 30px 0px;*/
        /*box-shadow: rgb(0 0 0 / 45%) 10px 10px 30px 0;*/
        box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 30px 0;
    }

    .wdsAlert .btn {
        font-size: 14px;
        /*font-weight: bold;*/
        line-height: 1;
        color: rgb(34, 34, 34);
        text-align: center;
        background-color: rgb(238, 238, 238);
        border-radius: 3px;
        cursor: pointer;
        padding-left: 8px;
        padding-right: 8px;
    }

    .wdsAlert .btnSmall {
        font-size: 12px;
        padding: 4px;
    }

    .wdsAlert .btn:hover {
        background-color: rgb(221, 221, 221);
    }

/*Inspectors*/
.baseInspectorTable {
    width: 100%;
    line-height: 1.15;
    font-size: 12px;
}

    .baseInspectorTable .wdsAlert {
        font-size: 12px;
    }

    .baseInspectorTable .btnSmall {
        font-size: 12px;
    }

    .baseInspectorTable .displayOnlyIfStaticPosition,
    .baseInspectorTable .displayOnlyIfRelativePosition,
    .baseInspectorTable .displayOnlyIfFixedPosition,
    .baseInspectorTable .displayIfMarginAuto,
    .baseInspectorTable .displayIfMarginPartialAuto
    {
        display: none;
    }

    .baseInspectorTable.static_position .displayOnlyIfStaticPosition {
        display: table-row;
    }

    .baseInspectorTable.relative_position .displayOnlyIfRelativePosition {
        display: table-row;
    }

    .baseInspectorTable.fixed_position .displayOnlyIfFixedPosition {
        display: table-row;
    }

    .baseInspectorTable.marginAuto .displayIfMarginAuto {
        display: table-row;
    }

    .baseInspectorTable.marginPartialAuto .displayIfMarginPartialAuto {
        display: table-row;
    }

    .baseInspectorTable.hideMarginSection .marginSection {
        display: none;
    }

    .baseInspectorTable tr td:nth-child(1) {
        width: 37%;
    }

    .baseInspectorTable tr td:nth-child(2) {
        font-weight: bold;
    }

    .baseInspectorTable .faintInfo {
        font-weight: normal;
        font-style: italic;
        opacity: 0.5;
    }

    /*conditionals in inspector*/
    .baseInspectorTable .displayOnlyInFocusMode {
        display: none;
    }

    .baseInspectorTable.isFocusMode .displayOnlyInFocusMode {
        display: block;
    }

.marginSection table td {
    width: 30px !important;  
}

/* niu -> not in use: this is the color picker with numbers, visible outside the action-panel */

/* we keep it here a bit, for short term reference. todo remove, if not needed after a bit (today: 05_06_2020) */

.cpx-cont {
  width: 107px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.38);
  position: absolute;
  top: 36px;
  left: -138px;
  z-index: 21;
}

.cpx-pad {
  width: 26px;
  height: 54px;
  text-align: center;
  color: #888888;
  background-color: #f7f7f7;
  border-radius: 5px;
  cursor: grab;
  float: left;
  position: relative;
  margin-top: 7px;
  margin-left: 7px;
}

.cpx-pad:hover {
  background-color: #f0f0f0;
}

.cpx-pad i {
  font-weight: normal;
}

.cpx-pad-output {
  height: 16px;
  width: 100%;
  color: #aaa;
  font-size: 13px;
  position: absolute;
  bottom: -29px;
}

.cpx-pad .btn-adjust {
  width: 13px;
  height: 13px;
  background-color: #dddddd;
  position: absolute;
  bottom: 0px;
  cursor: pointer;
}

.cpx-pad .btn-adjust:hover {
  background-color: #b9b9b9;
}

.cpx-pad .btn-adjust:active {
  background-color: #969696;
}

.btn-adjust.plus {
  border-radius: 0px 0px 0px 5px;
  left: 0px;
}

.btn-adjust.minus {
  border-radius: 0px 0px 5px 0px;
  right: 0px;
}

#cpx-luminosity {
  font-size: 21px;
  padding-top: 0px;
}

#cpx-saturation {
  font-size: 17px;
  padding-top: 5px;
}

#cpx-alpha {
  font-size: 16px;
  padding-top: 6px;
}


.cp-cont {
    width: 70px;
    height: 60px;
    position: relative;
}

.cp-pad.disabled {
    color: #ccc;
    cursor: initial;
    /*pointer-events: none;*/
}

    .cp-pad.disabled:hover {
        color: #ccc;
        background-color: #f7f7f7;
    }

.cp-cont.disabled .cp-pad {
    color: #ccc;
    pointer-events: none;
}

.cp-pad {
    width: 50%;
    height: 30px;
    color: #888;
    background-color: #f7f7f7;
    text-align: center;
    line-height: 0;
    position: absolute;
    cursor: grab;
}

    .cp-pad:hover {
        background-color: #f0f0f0;
    }

.cp-luminosity {
    top: 0px;
    left: 0px;
    border-radius: 3px 0px 0px 0px;
    border-bottom: 1px solid #fff;
    font-size: 21px;
    padding-top: 3px;
}

.cp-saturation {
    top: 0px;
    right: 0px;
    border-radius: 0px 5px 0px 0px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-size: 17px;
    padding-top: 5px;
}

.cp-picker {
    bottom: 0px;
    right: 0px;
    border-radius: 0px 0px 5px 0px;
    font-size: 18px;
    padding-top: 5px;
    cursor: pointer;
}

    .cp-picker.selected {
        color: #fff;
        background-color: #bbb;
    }

.cp-alpha {
    bottom: 0px;
    left: 0px;
    border-radius: 0px 0px 0px 5px;
    border-left: 1px solid #fff;
    font-size: 15px;
    padding-top: 6px;
}

.color-container {
    width: 100%;
    display: inline-block;
    margin-bottom: -2px;
    position: relative;
}

    .color-container .white {
        border: 1px solid #aaa;
    }

    .color-container .transparent {
        border: 1px dashed #aaa;
    }

.color-button {
    margin: 1px;
    width: 15px;
    height: 15px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 3px;
    float: left;
}

.color-selector {
    background-color: #eee;
    border-radius: 4px;
    line-height: 1;
    padding: 0px 8px 3px 7px;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    margin-right: -1px;
}

    .color-selector:hover {
        background-color: #ddd;
    }

    .color-selector.selected {
        color: #fff !important;
        background-color: #999;
    }

.bodyColorSelector {
    color: #777;
    margin-left: 10px;
    position: relative;
    top: -2px;
    font-size: 10px;
}

.editorViewportWhichMeansBodyInReadOnlyMode {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 18px 0px;
}

#editorViewport.mediaQueryVisible {
    container-type: inline-size;
}

.resizeBarContainer {
    position: absolute;
    bottom: 15px;
    right: 15px;
}
    .resizeBarContainer.mediaQueryVisible {
        bottom: 75px;
    }

/*resize output*/
.resizeBarContainer .outputScreenSize {
    background-color: rgba(80, 80, 80, 0.5);
    color: rgb(255, 255, 255);
    width: 68px;
    height: 15px;
    font-size: 9px;
    font-style: italic;
    line-height: 1;
    padding-top: 2px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.3);
    /*position*/
    position: absolute;
    right: 0px;
    bottom: 71px;
}

/*resize bar*/
.resizeBar {
    color: #555;
    border-radius: 3px;
    background-color: rgb(247, 247, 247);
    border: 1px #dedede solid;
}

    .resizeBar:hover {
        background-color: rgb(240, 240, 240);
    }

    .resizeBar .resizeIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 8px;
        margin-left: -4px;
        margin-top: -6px;
    }

    .resizeBar.rightBar {
        width: 15px;
        height: 50px;
        cursor: w-resize;
        position: absolute;
        right: 0px;
        bottom: 18px;
    }

        .resizeBar.rightBar .resizeIcon {
            transform: rotate(90deg);
        }

    .resizeBar.bottomBar {
        width: 50px;
        height: 15px;
        cursor: n-resize;
        position: absolute;
        bottom: 0px;
        right: 18px;
        margin-left: -50px;
    }

        .resizeBar.bottomBar .resizeIcon {
            margin-left: -2px;
            margin-top: -6px;
        }

    .resizeBar.cornerBar {
        width: 15px;
        height: 15px;
        cursor: nw-resize;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

        .resizeBar.cornerBar .resizeIcon {
            transform: rotate(135deg);
            margin-left: -5px;
            margin-top: -7px;
        }

    .resizeBar.panCornerBar {
        width: 50px;
        height: 50px;
        cursor: grab;
        position: absolute;
        bottom: 18px;
        right: 18px;
        background-color: rgba(80,80,80, 0.5);
        color: #ffffff33;
        border: 1px solid rgba(255,255,255,0.3);
    }

        .resizeBar.panCornerBar:hover {
            color: #fff;
        }

        .resizeBar.panCornerBar .resizeIcon {
            font-size: 30px;
            margin-left: -15px;
            margin-top: -23px;
        }

.enableFocusMode .layer * {
    opacity: 0.3;
    outline-offset: 10px;
    pointer-events: none;
    /*from .sys-unselectable*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.layer .focusElement {
    box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 35px 0px;
    opacity: 1;
    /*from .sys-unselectable*/
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-touch-callout: initial;
    user-select: text;
}

    .layer .focusElement * {
        opacity: 1;
        pointer-events: initial;
    }

    .layer .focusElement [data-type='box'] iframe {
        pointer-events: none;
    }

#focusLock.disabled {
    pointer-events: none;
    display: none;
}
html, body {
    height: 100%;
}

a {
    color: inherit;
}

    a, a:link, a:visited, a:focus, a:hover, a:active {
        text-decoration: none;
        /*color: inherit;*/
    }

        a:not([href]) {
            /*color: inherit;*/
            text-decoration: none;
        }

            a:not([href]):hover {
                /*color: inherit;*/
                text-decoration: none;
            }

table td {
    /*background-color: gray;*/
    width: 1px;
    /*text-align: center;*/
}

/* fix chrome issue for black borders on input fields */

input:focus, textarea:focus, select:focus {
    outline: 3px solid #aaa;
}

button {
    outline: none;
    border: none;
}

    button:focus {
        outline: none;
    }


.fr {
    float: right;
}
/* Global Override - especially to avoid awful black outline on chrome */

/*DARK MODE*/
body.surfaceEditMode.darkMode {
    background: #333;
    background-color: #333;
}

.darkMode .editorViewportWhichMeansBodyInReadOnlyMode {
    /*background-color: #777;*/
}

/*LIGHT MODE*/
body.surfaceEditMode.lightMode {
    background: #999;
    background-color: #999;
}
.lightMode .editorViewportWhichMeansBodyInReadOnlyMode {
    /*background-color: #fff;*/
}


#gpMainContainer {
    width: 40%;
    min-width: 568px;
    height: 21px;
    top: 20px;
    left: 29%;
    border-radius: 10px;
    z-index: 20;
    position: fixed;
}

#gpRotationLabel {
    color: #fff;
    font-size: 11px;
    text-align: center;
    padding: 1px;
    width: 5%;
    min-width: 28px;
    float: left;
}

#gpMainGradient {
    width: 95%;
    height: 100%;
    float: right;
    border-radius: 0px 10px 10px 0px;
    background: linear-gradient(90deg, rgb(0, 121, 191) 2%, rgb(242, 214, 0) 50%, rgb(235, 90, 70) 98%);
}

.gpMainBorder {
    border-color: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 0px 1px;
    background-color: rgba(0, 0, 0, 0.6);
}

.gpPoint {
    width: 22px;
    height: 32px;
    border-radius: 5px;
    position: absolute;
    top: -6px;
    cursor: grab;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 3px #000000;
    font-size: 12px;
    padding-top: 4px;
}

    .gpPoint.selected {
        box-shadow: rgba(159,159,159,0.6) 0px 0px 0px 8px;
        z-index: 1;
    }

.gpClearGradient {
    width: 20px;
    height: 20px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 25px;
    line-height: 0;
    padding-top: 7px;
    cursor: pointer;
}

    .gpClearGradient:hover {
        background-color: rgb(235, 90, 70);
    }

#gpMainGradient div {
    float: left;
    width: 5%;
    height: 100%;
    border: 1px solid black;
    opacity: 0;
}

.iSurfaceContainerTag {
    display: flex;
}

.xn-panel .layer-selector-container {
    width: 13px;
    position: absolute;
    top: 51px;
    left: -15px;
}

.layer-selector-container .layer-selector {
    width: 15px;
    height: 30px;
    border: 1px solid #ddd;
    border-right: 0px;
    border-radius: 4px 0px 0px 4px;
    margin-bottom: 1px;
    background-color: white;
}

.layer-selector {
    color: #aaa;
}

    .layer-selector:hover {
        background-color: #eee;
    }

    .layer-selector.selected {
        background-color: #eeeeee;
        border-color: #cccccc;
        border-right: 4px solid #cccccc;
    }

    .layer-selector.serviceLayer {
        background-color: #ff9f1a;
        border-color: #ff9f1a;
        /*border-right: 4px solid #ff9f1a;*/
        color: #fff;
    }

        .layer-selector.serviceLayer.selected {
            background-color: #ff9f1a;
            border-color: #eb5a46;
            border-right: 4px solid #eb5a46;
        }

    .layer-selector.frozen {
        color: #ccc;
        border-right: none;
    }

        .layer-selector.frozen.serviceLayer {
            color: #fff;
            border-right: none;
        }

    .layer-selector.layerHidden {
        border: 1px dashed #ccc;
    }

        .layer-selector.layerHidden.serviceLayer {
            border: 1px dashed #fff;
        }


/*frozen. hidden or serviceLayer*/
/*serviceLayer is always hidden in View Only mode*/
.layer.serviceLayer {
    display: none;
    pointer-events: none;
}

.parallaxMode .layer.serviceLayer {
    display: none !important;
    pointer-events: none;
}

.surfaceEditMode .layer.serviceLayer {
    display: block;
    pointer-events: unset;
}


.layer.frozen,
.surfaceEditMode .layer.frozen.serviceLayer {
    pointer-events: none;
}

    .layer.frozen.highlight * {
        outline: 2px dashed #b1b1b1 !important;
    }

.layer.layerHidden,
.surfaceEditMode .layer.layerHidden.serviceLayer {
    display: none;
    /*pointer-events: none;*/
}


.layer.highlight * {
    outline: 3px dashed #dc8000 !important;
    outline-offset: 10px;
}

.layer.highlight:empty {
    outline: 3px dashed #dc8000 !important;
    height: 30px;
    width: 200px;
    border-radius: 20px;
    margin-top: 15px;
    margin-left: 15px;
}

.isolateMode .layer {
    opacity: 0.1;
    pointer-events: none;
}

    .isolateMode .layer.current {
        opacity: initial;
        pointer-events: initial;
    }

#surface-viewport .isolateMode .layer {
    opacity: 0;
    pointer-events: none;
}

    #surface-viewport .isolateMode .layer.current {
        opacity: initial;
        pointer-events: initial;
    }

.isolateMode .layer-selector {
    font-size: 11px;
    text-align: center;
    padding-top: 5px;
}

.layer-creator {
    line-height: 0;
    padding: 6px 0px 0px 2px;
    margin-top: 6px;
    width: 15px;
    height: 18px;
    border: 1px solid #ddd;
    border-right: 0px;
    border-radius: 4px 0px 0px 4px;
    background-color: #eee;
    color: #888;
}

    .layer-creator:hover {
        background-color: #ddd;
    }

#layerToggleFreezeAndHide.freezeIsSelected,
#layerToggleFreezeAndHide.hideIsSelected {
}

    #layerToggleFreezeAndHide.freezeIsSelected.hideIsSelected .la1-lock {
        display: none;
    }

    #layerToggleFreezeAndHide.freezeIsSelected.hideIsSelected .icon-eye {
        display: block !important;
    }

.pad {
    background-color: #f7f7f7;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    line-height: 0;
    padding: 8px 0px 0px 4px;
    position: relative;
    cursor: grab;
}

    .pad:hover {
        background-color: #f0f0f0;
    }

    .pad .label {
        color: #888;
        font-size: 13px;
    }

    .pad .pad-output {
        width: 100%;
        height: 10px;
        text-align: center;
        color: #888;
        font-weight: bold;
        /*background-color: red;*/
        position: absolute;
        left: 0px;
        top: 31px;
    }

        .pad-output.multiNumbers {
            font-size: 11px;
            line-height: 1;
            top: 24px;            
            height: 31px;
        }

    /* todo: for the below: the element position refers to the first positioned ancestor - that's VERY important to keep in mind */

    .pad .pad-btn {
        background-color: #ddd;
        width: 16px;
        height: 16px;
        position: absolute;
        cursor: pointer;
    }

        .pad .pad-btn:hover {
            background-color: #b9b9b9;
        }

.pad-btn.plus {
    border-radius: 0px 5px 0px 5px;
    left: 0px;
    bottom: 0px;
}

.pad-btn.minus {
    border-radius: 5px 0px 5px 0px;
    right: 0px;
    bottom: 0px;
}

.pad.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/**not in use - remove if not necessary*/
.advancedPadSwitch {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-color: rgb(233, 233, 233);
    border-width: 1px;
    border-style: solid;
    border-radius: 98px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
    /**not in use - remove if not necessary*/
    .advancedPadSwitch:hover {
        background-color: #b9b9b9;
        border-color: #b9b9b9;
    }

.padAdvancedContainer {
    width: 126px;
    height: 109px;
    background-color: rgb(247, 247, 247);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
}

.padAdvancedNumber {
    font-size: 16px;
    color: rgb(136, 136, 136);
    font-weight: bold;
    width: 35px;
    height: 19px;
    text-align: center;
    line-height: 1;
    cursor: grab;
}




.padAdvancedTitle {
    font-size: 13px;
    color: rgb(255, 255, 255);
    width: 62px;
    height: 23px;
    text-align: center;
    background-color: rgba(55, 55, 55, 0.5);
}
.white {
  background-color: #fff;
}

.black {
  background-color: #000;
}

.dark-blue {
  background-color: #0d47a1;
}

.blue {
  background-color: #0079bf;
}

.green {
  background-color: #70b500;
}

.orange {
  background-color: #ff9f1a;
}

.red {
  background-color: #eb5a46;
}

.dark-red {
  background-color: #cc0000;
}

.yellow {
  background-color: #f2d600;
}

.dark-violet {
  background-color: #9933cc;
}

.violet {
  background-color: #c377e0;
}

.pink {
  background-color: #ff78cb;
}

.light-blue {
  background-color: #00c2e0;
}

.light-green {
  background-color: #51e898;
}

.dark-green {
  background-color: #007e33;
}

.gray {
  background-color: #c7c7c7;
}

.light-gray {
  background-color: #eee;
}

.transparent {
  background-color: transparent;
}

.mini-gradient {
    border: 1px solid #c8c8c8;
    background: linear-gradient(137deg, rgb(68, 68, 68) 2%, rgb(255, 255, 255) 89%);
}

.selection-stage-container {
    border: 1px dashed #aaa;
}

#surface .selected {
    outline-offset: 10px;
    outline: #0079bf dashed 3px;
}

.isMultiSelect .disableWhenMultiSelect {
    pointer-events: none;
}

    .isMultiSelect .disableWhenMultiSelect .label {
        color: #ccc !important;
    }

    .isMultiSelect .disableWhenMultiSelect i {
        color: #aaa !important;
        pointer-events: none;
    }



.isMultiSelect .mini-gradient.disableWhenMultiSelect {
    opacity: 0.5;
}

.buttonStudio {
    position: absolute;
    background-color: #fff;
    top: 0;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    padding: 5px;
    width: 300px;
} 

    .buttonStudio .cssClassSelector {
        width: 83px;
        height: 28px;
        color: #888;
        background-color: #eee;
        font-size: 13px;
        text-align: center;
        padding-top: 3px;
        margin-right: 4px;
        border-radius: 3px;
        cursor: pointer;
    }

        .buttonStudio .cssClassSelector:hover {
            background-color: #ddd;
            /*border: 1px solid #ddd;*/
        }

        .buttonStudio .cssClassSelector.autoClassExists {
            color: #777;
            background-color: #ddd;
            font-weight: bold;
        }

        .buttonStudio .cssClassSelector.editInProgress {
            box-shadow: #eb5a46 0px 0px 0px 3px;
            color: #eb5a46;
        }

#styleClassSelector.editInProgress {
    box-shadow: #777 0px 0px 0px 2px;
    color: #777;
}



.cssClassSelector.active .activeMarker {
    display: block;
}

.activeMarker {
    width: 7px;
    height: 22px;
    border-radius: 0px 3px 3px 0px;
    background-color: #aaa;
    position: relative;
    top: -18px;
    left: 76px;
    display: none;
}

.buttonStudio .cssClassSelector.delete {
    width: 22px;
    height: 22px;
    font-size: 17px;
    line-height: 0;
    padding-top: 2px;
    margin-right: 0px;
}

.classInput {
    border: 1px solid #ddd;
    color: #555;
    font-size: 12px;
    text-align: justify;
    border-radius: 3px;
    background-color: #f5f5f5;
    padding-left: 6px;
    width: 226px;
    height: 29px;
    /*margin-bottom: 16px;*/
}

    .classInput:focus {
        outline: none;
        border: 1px solid #bbb;
    }

.buttonStudio .label1 {
    font-size: 11px;
    color: #777;
    height: 20px;
    width: 100%;
    /*margin-top: -3px;*/
    /*margin-bottom: 1px;*/
}

.styleInput {

    width: 100%;
    height: 250px;
    position: relative;
    background-color: rgb(36, 41, 46);
    font-size: 12px;
    color: white;
    float: left;
}

.styleInput_light_nonAceEditor {
    border: 1px solid #ddd;
    color: #555;
    font-size: 12px;
    border-radius: 3px;
    background-color: #f5f5f5;
    padding-left: 6px;
    width: 257px;
    height: 180px;
}

    .styleInput_light_nonAceEditor:focus {
        outline: none;
        border: 1px solid #bbb;
    }

.styleInput_dark {
    border: 1px solid #ddd;
    color: #555;
    font-size: 12px;
    background-color: rgb(36, 41, 46);
    padding-left: 6px;
    width: 257px;
    height: 180px;
}


#createdClassesContainer {
    min-width: 180px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e8e8e9;
    padding: 2px 0px 5px 5px;
    font-size: 12px;
    margin-bottom: 5px;
}

#existingClassesContainer {
    min-width: 180px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e8e8e9;
    padding: 2px 0px 5px 5px;
    font-size: 12px;
}

.created-class {
    position: relative;
}

    .created-class.selectedClass {
        font-weight: bold;
    }

    .created-class .name {
        color: #888;
        margin-right: 30px;
        /*display: block;*/
    }

        .created-class .name:hover {
            color: #333;
            cursor: pointer;
        }

    .created-class .rename {
        padding: 6px 0px 0px 0px;
        line-height: 0;
        text-align: center;
        width: 59px;
        height: 15px;
        background-color: #fff;
        border-radius: 3px;
        border: 1px solid #0079bf;
        color: #fff;
        opacity: 0.4;
        float: right;
        margin-top: 3px;
        margin-right: 4px;
    }

        .created-class .rename:hover {
            opacity: 1;
            background-color: #0079bf;
            cursor: pointer;
        }

    .created-class .delete {
        width: 15px;
        height: 15px;
        background-color: #fff;
        border-radius: 3px;
        border: 1px solid #eb5a46;
        opacity: 0.4;
        float: right;
        margin-top: 3px;
        margin-right: 4px;
    }

        .created-class .delete:hover {
            opacity: 1;
            background-color: #eb5a46;
            cursor: pointer;
        }

/*stage: the most important element in surface*/
.stage {
    /*border: 1px solid #aaa;*/
    /*opacity: 0.7;*/
}

/*stage-container: the second most important element in surface*/
.stage-container {
    padding: 20px;
    position: absolute;
    border: 1px dashed #ccc;
    z-index: 10;
}

    .stage-container [data-type] {
        position: initial;
    }

/*stage-container: margins*/
.marginBaseBar {
    border-radius: 3px;
    border-color: rgba(255, 255, 255, 0.3);
    border-width: 1px;
    border-style: solid;
    background-color: rgba(0, 0, 0, 0.2);
    width: 91px;
    height: 82px;
}

    .marginBaseBar:hover {
        background-color: rgb(100, 100, 100);
    }

.mbCornerBase {
    width: 25px;
    height: 25px;
    /*border-color: rgb(170, 170, 170);
            border-width: 1px;
            border-style: solid;*/
}

.mbBottom {
    width: 15px;
    height: 5px;
    cursor: s-resize;
    border-radius: 3px 0px 0px 3px;
    border-right: none;
}

.mbBottomRight {
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 3px;
    border-top: none;
    border-left: none;
    cursor: se-resize;
}

.mbLeft {
    width: 5px;
    height: 15px;
    cursor: w-resize;
    border-radius: 0px 0px 3px 3px;
    border-top: none;
}

.mbRight {
    width: 5px;
    height: 15px;
    cursor: e-resize;
    border-radius: 3px 3px 0px 0px;
    border-bottom: none;
}

.mbTop {
    width: 15px;
    height: 5px;
    cursor: n-resize;
    border-radius: 0px 3px 3px 0px;
    border-left: none;
}

.mbTopLeft {
    width: 5px;
    height: 5px;
    border-radius: 3px 0px 0px;
    border-bottom: none;
    border-right: none;
    cursor: nw-resize;
}

/*buttons*/
.stage-button {
    width: 20px;
    height: 20px;
    background-color: #eee;
    cursor: pointer;
    text-align: center;
    line-height: 0px;
    padding-top: 3px;
    font-size: 13px;
    color: #777;
    border-radius: 3px;
    z-index: 11;
}

    .stage-button:hover {
        background-color: #ddd;
    }

    .stage-button.link {
        /*width: 42px;*/
        padding-top: 3px !important;
        font-size: 12px !important;
    }

        .stage-button.link:hover {
            text-decoration: none;
            color: #777;
            /*background-color: #f3f3f3;*/
            /*box-shadow: #aaa 0px 0px 9px 0px;*/
        }

    .stage-button i {
        font-weight: bold;
    }

textarea.stage {
    background-color: transparent;
    resize: none;
    overflow: auto;
}

.stage-button.light {
    font-size: 10px;
    padding-top: 4px;
    color: #999;
    background-color: white;
    border: 1px solid #eee;
}

    .stage-button.light:hover {
        background-color: #f3f3f3;
    }

/*conditional visibility for some buttons*/
.show-on-image, .show-on-bgImage, .show-on-data-link, .show-on-focus-elements, .show-on-icon {
    display: none;
}

/*margins*/
.showForStaticPosition,
.showForRelativePosition {
    display: none;
}

[data-stage-position='static'] .showForStaticPosition,
[data-stage-position='relative'] .showForRelativePosition {
    display: block;
}

/*images*/
[data-type='image'] .show-on-image {
    display: block;
}

[data-type='bg-image'] .show-on-image, [data-type='bg-image'] .show-on-bgImage {
    display: block;
}

[data-link] .show-on-data-link {
    display: block;
}

[data-type='image'] .show-on-image {
    display: block;
}

/*focus aka group*/
[data-has-focus-elements='true'] .show-on-focus-elements {
    display: block;
}

/*links*/
a[data-link] {
    display: block;
}

    a[data-link]:hover:not(#stage) {
    }

.action-link-stage {
    width: 33px;
    height: 33px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    text-align: center;
    background-color: rgb(199, 199, 199);
    border-radius: 26px;
    padding: 2px;
    position: absolute;
    top: 463px;
    left: 662px;
}

/*icons*/
[data-type='box-icon'] .show-on-icon{
    display: block;
}
 
/*iFrame*/
[data-type='box'] iframe {
    pointer-events: none;
}

/*mini stage*/
#miniStageForGroup .miniStageIcon {
    position: absolute;
    bottom: -47px;
    right: -47px;
    color: white;
    border: 1px solid rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.5);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 10px 0px;
}

#stage_,.align-selector i,.show-on-bgImage,.show-on-image{display:none}.action-button,.action-button-create,.cp-pad,.cpx-pad,.pad .pad-output,.stage-button{text-align:center}.align-selector.center #as-center,.align-selector.justify #as-justify,.align-selector.left #as-left,.align-selector.right #as-right{display:initial}.action-button-create{width:30px;height:30px;color:#777;background-color:#eee;border-radius:3px;float:left;cursor:pointer;line-height:0;padding-top:1px;font-size:26px;margin:0 3px 0 0}.action-button,.cpx-cont,.wdsAlert{border-radius:5px}.action-button-create:hover{color:#fff;background-color:#0079bf}.action-button-create span{line-height:0;display:inline-block;padding-top:11px}.action-button-create-menu{float:right;margin-right:6px;margin-left:9px}.action-button.selectable.disabled{cursor:auto;pointer-events:none}.action-button.selectable.disabled i{color:#d9d9d9;font-weight:100}.action-button.selectable.disabled:hover{background-color:#eee}.selectable.light i{color:#989898}.selectable.light.selected i{color:#fff}.action-button.web{box-shadow:#aaa 2px 2px 4px;margin-top:5px;margin-bottom:8px;margin-right:6px}.web.private,.web.unsaved{box-shadow:#f08475 2px 2px 4px;color:#fceae8}.web.unsaved{background-color:#f08475}.web.unsaved:hover{background-color:#eb5a46}.web.private{background-color:#f08475}.web.private:hover{color:#fceae8;background-color:#eb5a46}.web.public{background-color:#70b500;color:#f5ffe6;box-shadow:#70b500 2px 2px 4px}.web.public:hover{background-color:#5e9900;color:#f5ffe6}.web.disabled,.web.disabled:active,.web.disabled:hover{color:#b1b1b1;background-color:#d7d7d7;box-shadow:none;cursor:default;pointer-events:none}.action-button{margin:0 3px 3px 0;width:28px;height:28px;background-color:#eee;cursor:pointer;line-height:0;padding-top:5px;font-size:16px;color:#777;float:left}.action-button:hover,.cpx-pad .btn-adjust{background-color:#ddd}.action-button.selectable{color:#777}.action-button.selectable.selected,.action-button:active{color:#555;background-color:#ccc}.action-button span{line-height:0;display:inline-block;padding-top:8px}.action-button i{font-weight:700}.wdsAlert{width:207px;font-size:14px;color:#fff;border-width:1px;border-style:solid;padding:9px;position:absolute;top:0;right:267px}.wdsAlert.wdsInfo{background-color:#0079bf;border-color:#0092e7;box-shadow:#0079bf 10px 10px 30px 0}.wdsAlert.wdsWarning{background-color:#ff9f1a;border-color:#ffb956;box-shadow:#ffa82e 10px 10px 30px 0}.wdsAlert.wdsDanger{background-color:#eb5a46;border-color:#ef8273;box-shadow:#ed6a58 10px 10px 30px 0}.cpx-cont{width:107px;height:100px;background-color:#fff;border:1px solid #e0e0e0;box-shadow:5px 5px 15px -5px rgba(0,0,0,.38);position:absolute;top:36px;left:-138px;z-index:21}.cp-luminosity,.cp-saturation{top:0;border-bottom:1px solid #fff}.cpx-pad{width:26px;height:54px;color:#888;background-color:#f7f7f7;border-radius:5px;cursor:grab;float:left;position:relative;margin-top:7px;margin-left:7px}.cpx-pad:hover{background-color:#f0f0f0}.cpx-pad i{font-weight:400}.cpx-pad-output{height:16px;width:100%;color:#aaa;font-size:13px;position:absolute;bottom:-29px}.cpx-pad .btn-adjust{width:13px;height:13px;position:absolute;bottom:0;cursor:pointer}.cpx-pad .btn-adjust:hover{background-color:#b9b9b9}.cpx-pad .btn-adjust:active{background-color:#969696}.btn-adjust.plus{border-radius:0 0 0 5px;left:0}.btn-adjust.minus{border-radius:0 0 5px;right:0}#cpx-luminosity{font-size:21px;padding-top:0}#cpx-saturation{font-size:17px;padding-top:5px}#cpx-alpha{font-size:16px;padding-top:6px}.cp-cont{width:70px;height:60px;position:relative}.cp-pad.disabled{color:#ccc;cursor:initial}.cp-pad.disabled:hover{color:#ccc;background-color:#f7f7f7}.cp-cont.disabled .cp-pad{color:#ccc;pointer-events:none}.cp-pad{width:50%;height:30px;color:#888;background-color:#f7f7f7;line-height:0;position:absolute;cursor:grab}.cp-pad:hover{background-color:#f0f0f0}.cp-luminosity{left:0;border-radius:3px 0 0;font-size:21px;padding-top:3px}.cp-saturation{right:0;border-radius:0 5px 0 0;border-left:1px solid #fff;font-size:17px;padding-top:5px}.cp-picker{bottom:0;left:0;border-radius:0 0 0 5px;font-size:18px;padding-top:5px;cursor:pointer}.cp-picker.selected{color:#fff;background-color:#bbb}.cp-alpha{bottom:0;right:0;border-radius:0 0 5px;border-left:1px solid #fff;font-size:15px;padding-top:6px}.color-picker-active{cursor:url(../../assets/img/iDrop.png) -20 20,auto}.color-container{width:100%;display:inline-block;margin-bottom:-2px;position:relative}.color-container .white{border:1px solid #aaa}.color-container .transparent{border:1px dashed #aaa}.color-button,.stage-button{border-radius:3px;cursor:pointer}.color-button{margin:1px;width:15px;height:15px;background-color:#fff;float:left}.color-selector{background-color:#eee;border-radius:4px;line-height:1;padding:0 8px 3px 7px;color:#555;cursor:pointer;font-size:13px;margin-right:3px}.color-selector:hover{background-color:#ddd}.color-selector.selected{color:#fff!important;background-color:#999}.bodyColorSelector{color:#777;margin-left:10px;position:relative;top:-2px;font-size:10px}a,a:hover{color:inherit}body,html{height:100%}a:hover{text-decoration:underline}table td{width:1px}input:focus,select:focus,textarea:focus{outline:#aaa solid 3px}.xn-panel .layer-selector-container{width:13px;position:absolute;top:51px;left:-15px}.layer-selector-container .layer-selector{width:15px;height:30px;border:1px solid #ddd;border-right:0;border-radius:4px 0 0 4px;margin-bottom:1px;background-color:#fff}.layer-creator,.layer-selector.selected,.layer-selector:hover{background-color:#eee}.layer-selector{color:#aaa}.layer-selector.selected{border-color:#ccc;border-right:4px solid #ccc}.layer-selector.frozen{color:#ccc;border-right:none}.layer.frozen{pointer-events:none}.layer.frozen.highlight *{outline:#b1b1b1 dashed 2px!important}.layer.highlight *{outline:#dc8000 dashed 2px!important}.layer.highlight:empty{outline:#dc8000 dashed 1px!important;height:50px;width:50px}.layer-creator{line-height:0;padding:6px 0 0 2px;margin-top:6px;width:15px;height:18px;border:1px solid #ddd;border-right:0;border-radius:4px 0 0 4px;color:#888}.layer-creator:hover,.pad .pad-btn{background-color:#ddd}.pad{background-color:#f7f7f7;width:100%;height:60px;border-radius:5px;line-height:0;padding:8px 0 0 4px;position:relative;cursor:grab}.pad:hover{background-color:#f0f0f0}.pad .label{color:#888;font-size:13px}.pad .pad-output{width:100%;height:10px;color:#888;font-weight:700;position:absolute;left:0;top:31px}.pad .pad-btn{width:16px;height:16px;position:absolute;cursor:pointer}.pad .pad-btn:hover{background-color:#b9b9b9}.pad-btn.plus{border-radius:0 5px;left:0;bottom:0}.pad-btn.minus{border-radius:5px 0;right:0;bottom:0}.pad.disabled{pointer-events:none;opacity:.5}.white{background-color:#fff}.black{background-color:#000}.dark-blue{background-color:#0d47a1}.blue{background-color:#0079bf}.green{background-color:#70b500}.orange{background-color:#ff9f1a}.red{background-color:#eb5a46}.dark-red{background-color:#c00}.yellow{background-color:#f2d600}.dark-violet{background-color:#93c}.violet{background-color:#c377e0}.pink{background-color:#ff78cb}.light-blue{background-color:#00c2e0}.light-green{background-color:#51e898}.dark-green{background-color:#007e33}.gray{background-color:#c7c7c7}.light-gray{background-color:#eee}.transparent{background-color:transparent}.stage-button,.stage-button:hover{background-color:#eee}.selection-stage-container{border:1px dashed #aaa}#surface .selected{border:2px dashed #0079bf}.stage-container{padding:20px;position:absolute;border:1px dashed #ccc;z-index:10}.stage-button{width:20px;height:20px;line-height:0;padding-top:3px;font-size:13px;color:#777;z-index:11}.stage-button i{font-weight:700}textarea.stage{background-color:transparent;resize:none;overflow:auto}.stage-button.image-crop{font-size:10px;padding-top:4px;color:#999898;background-color:#fff;border:1px solid #eee}[data-type=image] .show-on-image,[data-type=bg-image] .show-on-bgImage,[data-type=bg-image] .show-on-image{display:block}.subSurface{opacity:.7}.subSurface *{pointer-events:none;cursor:default}.unselectable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.xn-panel .table-responsive{border:1px solid #e8e8e8;border-radius:5px}.xn-divider{background-color:#e8e8e8}.xn-panel tr.xn-divider td{padding:2px}.btop{border-top:1px solid #e8e8e8}#cloud.disabled,.xn-panel.so-disabled .cs-cont span:not(.keep-enabled){color:#ccc;pointer-events:none}.xn-panel.so-disabled .pad:not(.keep-enabled){pointer-events:none}.xn-panel.so-disabled .pad:not(.keep-enabled) span{color:#ccc}.xn-panel.so-disabled .action-button:not(.keep-enabled){pointer-events:none}.xn-panel.so-disabled .action-button:not(.keep-enabled) i,.xn-panel.so-disabled .action-button:not(.keep-enabled) span{color:#aaa}.xn-panel.so-disabled input.expandable{pointer-events:none}.xn-panel .table{margin-bottom:0;background-color:#fff}.xn-panel .table-responsive td{padding:5px}.xn-panel{width:247px;position:absolute;top:10px;right:10px;cursor:auto;z-index:20}.xn-panel .utilities #clipboardInput{position:absolute;bottom:15px;pointer-events:none;opacity:0;z-index:-1}input.expandable{margin-top:0;width:70%;height:30px;background-color:#f5f5f5;border:0 solid #aaa;outline:0;border-radius:5px;padding-left:5px;font-size:12px;z-index:11}input.expandable:focus{width:349px;font-size:10px;position:absolute;right:78px;border:2px solid #aaa}.new-panel{border:1px solid #ddd;width:220px;position:absolute;top:204px;border-radius:5px;overflow:hidden;background-color:#fff;cursor:pointer}.new-panel .header{height:29px;background-color:#eee;color:#999;font-size:13px}.new-panel table{margin-bottom:0}.new-panel td{padding:7px 8px 2px 10px}.new-panel .divider{background-color:#eee;padding:3px}
.subSurface {
  opacity: 0.7;
}

.subSurface * {
  pointer-events: none;
  cursor: default;
}


.scriptBox {
    width: 137px;
    height: 60px;
    background-color: rgb(255, 159, 26);
    border-color: rgb(242, 214, 0);
    border-width: 1px;
    border-style: solid;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 12px 0px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 17px;
    font-style: italic;
    font-weight: bold;
    padding: 13px;
    border-radius: 5px;
}

.sys-unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.sys-selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-touch-callout: initial;
    user-select: text;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.sys-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.whenActionsEditorContainer {
    width: 75%;
    height: 90%;
    box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 20px 0px;
    border-radius: 8px;
    background-color: rgb(72,72,72);
    border: 1px solid rgb(255, 255, 255);
    padding: 10px;
    z-index: 10;
    overflow-y: auto;
}

.whenEditorSave {
    font-size: 14px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 121, 191);
    text-align: center;
    border-radius: 5px;
    padding: 0px 10px 4px;
}

    .whenEditorSave:hover {
        background-color: rgb(13, 71, 161);
    }

.whenBlockSelector {
    height: 25px;
    font-size: 14px;
    color: rgb(34, 34, 34);
    background-color: rgb(247, 247, 247);
    border-radius: 3px;
    padding: 0px 8px 0px 7px;
    margin: 5px;
    cursor: pointer;
}

    .whenBlockSelector:hover {
        background-color: rgb(196, 196, 196);
    }

    .whenBlockSelector.selected {
        background-color: #0079bf;
        color: #fff;
        font-weight: bold;
        font-size: 13px;
        padding-top: 1px;
    }

.whenBlockSelectorsContainer {
    background-color: rgb(133, 133, 133);
    width: 200px;
    border-radius: 8px;
    border: 5px solid rgba(0, 0, 0, 0.6);
    padding: 5px;
}

.whenConnector {
    width: 26px;
    height: 16px;
    background-color: rgb(133, 133, 133);
    margin-top: -8px;
    position: absolute;
    top: 50%;
    left: -31px;
}

.whenEditorCancelButton {
    width: 68px;
    height: 30px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    background-color: rgb(181, 181, 181);
    text-align: center;
    padding: 3px 0px 0px;
    border-radius: 4px;
    cursor: pointer;
}

    .whenEditorCancelButton:hover {
        background-color: rgb(145, 145, 145);
    }

.whenEditorSaveButton {
    width: 68px;
    height: 30px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 121, 191);
    text-align: center;
    padding: 3px 0px 0px;
    border-radius: 4px;
    cursor: pointer;
}

    .whenEditorSaveButton:hover {
        background-color: rgb(13, 71, 161);
    }


.whenTempDisabled {
    opacity: 0.5;
    pointer-events: none;
}


.whenEditorWhiteLabel {
    width: 300px;
    height: 28px;
    font-size: 14px;
    color: rgb(255, 255, 255);
    font-style: italic;
}

.whenEditorWhiteLabelPickClass {
    width: 300px;
    height: 28px;
    font-size: 14px;
    color: rgb(255, 255, 255);
    font-style: italic;
    cursor: pointer;
}

    .whenEditorWhiteLabelPickClass:hover {
        color: #0079bf;
    }

    .whenEditorWhiteLabelPickClass.selectedClass {
        font-weight: bold;
    }


#classPickerContainer #existingClasses {
    border: 1px solid #a5a5a5;
    padding: 8px;
    border-radius: 4px;
}

/*aceEditor stuff*/
#scriptPickerScriptToRun {
    height: 80%;
    width: 100%;
    position: absolute;
    top: 44px;
    left: 0px;
    background-color: rgb(36, 41, 46);
    font-size: 12px;
    color: white
}

.supe-container {
    position: relative;
    cursor: pointer;
}

.supe-card {
    width: 180px;
    height: 55px;
    background-color: white;
    border-radius: 3px;
    position: relative;
    display: block;
}

    .supe-card:hover {
        background-color: #f5f5f5;
    }

.supe-container.picked-supe .supe-card {
    color: white;
    background-color: rgb(235,90,70);
}

.supe-privacy-bar {
    width: 5px;
    height: 100%;
    border-radius: 3px 0px 0px 3px;
    background-color: #d9d9d9;
    float: left;
}

.supe-name {
    font-size: 12px;
    font-weight: 500;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 140px;
    position: absolute;
}

.supe-hover {
    width: 26px;
    height: 55px;
    position: absolute;
    right: 0px;
    display: none;
}

.supe-date {
    font-size: 10px;
    position: absolute;
    bottom: 2px;
    right: -4px;
    color: rgb(179,179,179);
    width: 68px;
}

/* Below VERY Important: on hover one, affect another */
.supe-card:hover {
    background-color: #f5f5f5;
}

    .supe-card:hover .supe-hover {
        display: block;
    }

.supe-container.private .supe-privacy-bar {
    background-color: #f39b90;
}

.supe-container.public .supe-privacy-bar {
    background-color: #6d9827;
}



/*table*/
.supes-table {

}

    .supes-table tr td {
        width: 195px;
        height: 63px;
    }


.clearInnerHtmlOnClearingWhenHighlight{
    opacity: 0.5;
}
.show-on-when-summary {
    display: none;
}

[data-when-summary] .show-on-when-summary {
    display: block;
}

.whenActionsPanelTopContainer {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.2);
    height: 33px;
    top: 5px;
    left: 4px;
    border-radius: 3px;
    z-index: 20;
}

.whenBlock {
    font-size: 13px;
    color: rgb(255, 255, 255);
    position: static;
    background-color: rgba(0, 0, 0, 0.6);
    height: 23px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    float: left;
    margin: 5px;
    padding: 0px 12px 0px 10px;
    cursor: pointer;
    border-radius: 4px;
}

    .whenBlock:hover {
        background-color: rgba(38, 38, 38, 0.6);
    }

    .whenBlock.whenBlockEditInProgress {
        background-color: red;
    }

    .whenBlock.whenBlockCurrentStage {
        border: 2px solid white;
        line-height: 0px;
        padding-top: 9px;
        color: white;
    }

.whenBlockBin {
    font-size: 15px;
    color: rgb(255, 255, 255);
    position: static;
    background-color: rgba(0, 0, 0, 0.2);
    height: 23px;
    text-align: center;
    float: left;
    margin: 5px 5px 5px 60px;
    cursor: pointer;
    line-height: 0px;
    border-radius: 4px;
    padding: 3px 6px 3px 5px;
}

    .whenBlockBin:hover {
        background-color: rgb(235, 90, 71);
    }

.whenHighlight {
    outline: 3px dashed #dc8000 !important;
    outline-offset: 10px;
}

.whenBlockDebug {
    position: fixed;
    bottom: 20px;
    left: 10px;
    width: 1000px;
    height: 37px;
    font-size: 17px;
    color: rgb(142, 230, 0);
    background-color: rgba(0, 0, 0, 0.6);
    text-align: justify;
    border: 1px solid rgb(112, 181, 0);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.45) 10px 10px 13px 0px;
    padding: 3px 0px 0px 15px;
}


.whenTopBarSaveButton {
    width: 52px;
    height: 23px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 121, 191);
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

    .whenTopBarSaveButton:hover {
        background-color: rgb(13, 71, 161);
    }

.whenTopBarDeleteButton {
    width: 52px;
    height: 23px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 121, 191);
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    background-color: rgb(235, 90, 70);
    margin: 5px;
}

    .whenTopBarDeleteButton:hover {
        background-color: rgb(204, 0, 0);
    }

.xn-panel .table-responsive {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  /*background-color: red;*/
}

.xn-divider {
  background-color: #e8e8e8;
}

.xn-panel tr.xn-divider td {
  padding: 2px;
}

.btop {
  border-top: 1px solid #e8e8e8;
}


/* in some case, then we need to disable some stuff here and there */

#cloud.disabled {
  color: #ccc;
  pointer-events: none;
}

/* Stage Out Disabled -> so-disabled */

/* 1. disable color selectors, but SBG (Surface Background) */

.xn-panel.so-disabled .cs-cont span:not(.keep-enabled) {
  color: #ccc;
  pointer-events: none;
}

/* 2. disable all Pads, but Layer */

.xn-panel.so-disabled .pad:not(.keep-enabled) {
  pointer-events: none;
}

.xn-panel.so-disabled .pad:not(.keep-enabled) span {
  color: #ccc;
}

/* 3. disable all action-buttons, but Layer related */

.xn-panel.so-disabled .action-button:not(.keep-enabled) {
  pointer-events: none;
}

.xn-panel.so-disabled .action-button:not(.keep-enabled) span {
  color: #aaa;
}

.xn-panel.so-disabled .action-button:not(.keep-enabled) i {
  color: #aaa;
}

/* 4. disable inputs (link and image) */

.xn-panel.so-disabled input.expandable {
  pointer-events: none;
}


.xn-panel .table {
  margin-bottom: 0px;
  background-color: white;
}

.xn-panel .table-responsive td {
  padding: 5px;
}


/* xn-panel stands for Ex Novo Panel. todo rename to action-panel, which is the main control name */

.xn-panel {
    width: 247px;
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: auto;
    z-index: 20;
}

.xn-panel__createLabel {
    height: 30px;
    width: 32px;
    position: relative;
    top: -3px;
    font-size: 11px;
    /* background: #ffff00; */
    color: #aaa;
    display: inline-block;
    padding-top: 11px;
}

/* Panel Utilities are meant for app utility only. Ideally not visible to user */

.xn-panel .utilities #clipboardInput {
    position: absolute;
    bottom: 15px;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

input.expandable {
    margin-top: 0px;
    width: 70%;
    height: 30px;
    background-color: #f5f5f5;
    border: 0px solid #aaa;
    outline: none;
    border-radius: 5px;
    padding-left: 5px;
    font-size: 12px;
    z-index: 11;
}

    input.expandable:focus {
        width: 349px;
        font-size: 10px;
        position: absolute;
        right: 78px;
        border: 2px solid #aaa;
    }

/* todo: please improve this when possible - first thing rename it as new-panel is the old name... */

.new-panel {
    border: 1px solid #ddd;
    width: 220px;
    position: absolute;
    top: 204px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    cursor: pointer;
}

    .new-panel .header {
        height: 29px;
        background-color: #eee;
        color: #999;
        font-size: 13px;
    }

    .new-panel table {
        margin-bottom: 0;
    }

    .new-panel td {
        padding: 7px 8px 2px 10px;
    }

    .new-panel .divider {
        background-color: #eee;
        padding: 3px;
    }

.supe-container {
    position: relative;
}

.supe-card {
    width: 180px;
    height: 55px;
    background-color: white;
    border-radius: 3px;
    position: relative;
    display: block;
}

.supe-privacy-bar {
    width: 5px;
    height: 100%;
    border-radius: 3px 0px 0px 3px;
    background-color: #d9d9d9;
    float: left;
}

.supe-name {
    font-size: 12px;
    font-weight: 500;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 140px;
    position: absolute;
}

.supe-hover {
    width: 26px;
    height: 55px;
    position: absolute;
    right: 0px;
    display: none;
}

/* Below VERY Important: on hover one, affect another */

.supe-card:hover {
    background-color: #f5f5f5;
}

    .supe-card:hover .supe-hover {
        display: block;
    }

.supe-ellipses {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    color: #bebebe;
    background-color: #f5f5f5;
    position: absolute;
    right: -10px;
    line-height: 0;
    padding-top: 2px;
    text-align: center;
    font-size: 27px;
    cursor: pointer;
}

.supe-overlay {
    width: 15px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 13px;
}

    .supe-overlay .supe-ellipses {
        display: none;
    }

        .supe-overlay .supe-ellipses .supe-date {
            top: 38px;
            right: 13px;
            width: 62px;
            height: 14px;
            padding-top: 7px;
        }

    .supe-overlay:hover .supe-ellipses {
        display: block;
    }

.supe-menu {
    width: 114px;
    height: 76px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    right: -108px;
    top: -26px;
    box-shadow: rgba(92,92,92,0.45) 10px 10px 26px 0px;
    z-index: 1;
}

    .supe-menu:hover {
        display: inherit;
    }

.supe-menu-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.supe-ellipses:hover {
    background-color: #f0f0f0;
    display: inherit;
}

    .supe-ellipses:hover .supe-menu {
        display: inherit;
    }

.supe-date {
    font-size: 10px;
    position: absolute;
    bottom: 2px;
    right: -4px;
    color: rgb(179,179,179);
    width: 68px;
}

/*remove after you finish when actions*/
.supe-menu-button {
    width: 48%;
    height: 48%;
    margin-left: 1px;
    margin-top: 1px;
    float: left;
}

    .supe-menu-button:hover {
        background-color: #f0f0f0;
    }

    .supe-menu-button i {
        color: rgb(142,142,142);
    }


/*new stuff*/
.new-supe-menu-button {
    font-size: 32px;
    text-align: center;
    color: rgb(142, 142, 142);
    width: 36px;
    height: 36px;
    line-height: 0;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    position: static;
    float: left;
    margin: 1px;
}

    .new-supe-menu-button:hover {
        background-color: rgb(240, 240, 240);
        color: rgb(142, 142, 142);
    }



.supe-edit {
    border-radius: 3px 0px 0px 0px;
    padding: 0px 0px 0px 4px;
}

.supe-rename {
    border-radius: 0px 3px 0px 0px;
    font-size: 26px;
    padding: 4px 0px 0px 3px;
}

.supe-add {
    font-size: 21px;
    padding: 6px 0px 0px;
}


.supe-privacy {
    font-size: 23px;
    padding-top: 6px;
    border-radius: 0px 0px 0px 3px;
}

    .supe-privacy.public {
        background-color: #9ec265;
    }

        .supe-privacy.public:hover {
            background-color: #6d9827;
        }

/* PRIVATE */

.supe-container.private .supe-privacy-bar {
    background-color: #f39b90;
}

.supe-container.private .supe-privacy {
    background-color: #f39b90;
}

    .supe-container.private .supe-privacy:hover {
        background-color: #e46859;
    }

/* PUBLIC */

.supe-container.public .supe-privacy-bar {
    background-color: #6d9827;
}

.supe-container.public .supe-privacy {
    background-color: #a1c960;
}

    .supe-container.public .supe-privacy:hover {
        background-color: #8cb549;
    }

    /* BOTH (this is fuckin' madness) */

    .supe-container.private .supe-privacy i, .supe-container.public .supe-privacy i {
        color: white;
    }

.supe-delete {
    border-bottom-right-radius: 3px;
    font-size: 27px;
    padding-top: 3px;
}