/* components */
      .text-input{
        padding:.5em;
        background-color: white;
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing: border-box;
        box-shadow: var(--box_shadow);
      }
      .text-input:focus{
        outline:none;
        border:1px solid var(--input_focus_border_color);
      }
      input::-webkit-calendar-picker-indicator {
        display: none !important;
      }

      .text-input-list{
        display:inline-flex;
        border:none;
        background-color: white;
        box-shadow: var(--box_shadow);
        position:relative;
      }
      .text-input-list input{
        padding:.5em;
        width:100%;
        background-color: transparent;
        /* padding-right:1em; */
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing: border-box;
        position: relative;
        z-index: 99;
      }
      .text-input-list input:focus{
        outline:none;
        border:1px solid var(--input_focus_border_color);
      }
      .text-input-list::after{
        content:'\25BE';
        font-size: 1.5em;
        margin-left:-1em;
        width:.8em;
        height:.8em;
        cursor:pointer;
      }

      .time-selector{
        padding:.5em;
        text-align: center;
        background-color: transparent;
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing: border-box;
        box-shadow: var(--box_shadow);
        /* cursor:pointer; */
        position:relative;
      }
     
            .time-selector .hour-12, .time-selector .hour-24, .time-selector .minute, .time-selector .dayHalf{
              padding:0px !important;
              margin:0px !important;
              text-align: center !important;
              width:25px !important;
              height:22px !important;
              border:none !important;
              box-sizing: border-box;
            }

            .time-selector .hour-12:focus, .time-selector .hour-24:focus, .time-selector .minute:focus, .time-selector .dayHalf:focus{
              outline:none;
              border-radius: .25em;
              box-sizing: border-box;
              border:1px solid var(--input_focus_border_color);
            }

      #time-selector-palette{
        position:relative;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        background-color: rgba(0,0,0,.2);
        display:none;
        z-index: 9999;
      }
            #time-selector-palette .palette{
              width:180px;
              height:90px;
              position:relative;
              top:0px;
              left:0px;
              background-color: white;
              z-index: 99999;
              border-radius: 5px;
              box-shadow: var(--box_shadow);
              padding:10px;
            }
                  #time-selector-palette .close{
                    position: absolute;
                    top:2px;
                    right:2px;
                    background-color: transparent;
                    border:1px solid gray;
                    border-radius: 5px;
                    padding:3px;
                    color:gray;
                  }
                  #time-selector-palette .close:hover{
                    background-color: red;
                    color:white;
                  }
                  #time-selector-palette .close:active{
                    transform: translateY(1px);
                  }
                  #time-selector-palette .check{
                    position: absolute;
                    bottom:2px;
                    right:2px;
                    background-color: transparent;
                    border:1px solid green;
                    border-radius: 5px;
                    padding:3px;
                    color:green;
                  }
                  #time-selector-palette .check:hover{
                    background-color: green;
                    color:white;
                  }
                  #time-selector-palette .check:active{
                    transform: translateY(1px);
                  }
                  #time-selector-palette .hour{
                    display:inline-block;
                    width:45px;
                    height:100%;
                    overflow: auto;
                    border:1px solid lightgray;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                  }
                  #time-selector-palette .colon{
                    display:inline-block;
                    width:10px;
                    height:100%;
                    vertical-align: top;
                    text-align: center;
                  }
                  #time-selector-palette .minute{
                    display:inline-block;
                    width:45px;
                    height:100%;
                    overflow:auto;
                    border:1px solid lightgray;
                    margin-right:10px;
                  }
                  #time-selector-palette .dayHalf{
                    display:inline-block;
                    width:45px;
                    height:100%;
                    overflow:auto;
                    border:1px solid lightgray;
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                  }
                  #time-selector-palette .hour button,#time-selector-palette .minute button,#time-selector-palette .dayHalf button{
                    display:block;
                    width:100%;
                    height:18px;
                    background-color: transparent;
                    border:none;
                  }
                  #time-selector-palette .hour button:hover,#time-selector-palette .minute button:hover,#time-selector-palette .dayHalf button:hover{
                    background-color: darkgray;
                    color:white;
                  }
                  #time-selector-palette .hour button.selected,#time-selector-palette .minute button.selected,#time-selector-palette .dayHalf button.selected{
                    background-color: blue;
                    color:white;
                  }

      .text-input-drop{
        display:inline-flex;
        border:none;
        background-color:white;
        box-shadow: var(--box_shadow);
        position:relative;
      }
      .text-input-drop select{
        appearance:none;
        padding:.5em;
        background-color: transparent;
        padding-right:1em;
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing: border-box;
        position: relative;
        z-index: 99;
      }
      .text-input-drop::after{
        content:'\25BE';
        font-size: 1.5em;
        margin-left:-.8em;
        width:.8em;
        height:.8em;
        cursor:pointer;

        font-size: 1.5em;
        margin-left:-1em;
        width:.8em;
        height:.8em;
        cursor:pointer;
      }

      .search-input{
        display:inline-flex;
        border:none;
        background-color:white;
        box-shadow: var(--box_shadow);
        position:relative;
      }
      .search-input input{
        padding:.5em;
        background-color: transparent;
        padding-right:2.2em;
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing:border-box;
        position:relative;
        z-index:99;
      }
      .search-input input:focus{
        outline:none;
        border: 1px solid var(--input_default_border_color);
      }
      .search-input::after{
        font-family: 'univisicons' !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        content:"\e916";  /*'\1F50E';*/
        font-size:1.2em;
        margin-top:.3em;
        margin-left:-1.2em;
        width:1.2em;
        height:.8em;
      }

      .date-input{
        padding:.5em;
        background-color: white;
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing: border-box;
        box-shadow: var(--box_shadow);
        padding-right:.5em;
      }
      .date-input:focus{
        outline:none;
        border:none;
        border:1px solid var(--input_focus_border_color);
      }
      input.date-input::after{
        font-family: 'univisicons';
        content:'\e978';
        color:rgb(10,10,10);
        font-size: 1.2em;
        margin-top: .3em;
        margin-left:-.5em;
        width:1.2em;
        height:.8em;
      }


            #univis-datepicker{
              position:absolute;
              top:0px;
              left:0px;
              display:block;
              width:100%;
              height:100%;
              background-color: rgba(0,0,0,.1);
              z-index:9999999999;
            }

                  #univis-datepicker-palette{
                    display:block;
                    width:260px;
                    position:absolute;
                    background-color: white;
                    z-index: 99999;
                    border-radius: 5px;
                    box-shadow: var(--box_shadow);
                  }
                  #univis-datepicker-controls{
                    position:relative;
                    display:block;
                    width:100%;
                    height:30px;
                    border-bottom:1px solid gray;
                    padding:5px;
                    box-sizing: border-box;
                    text-align: center;
                  }
                  #univis-datepicker-prev{
                    display:inline-block;
                    float:left;
                    font-size: 13px;
                    padding:3px;
                  }
                  #univis-datepicker-next{
                    display:inline-block;
                    float:right;
                    font-size: 13px;
                    padding:3px;
                  }
                  #univis-datepicker-month{
                    display:inline-block;
                    width:85px;
                    font-size: 12px;
                    font-weight: bold;
                    padding:3px;
                    text-align:center;
                    margin-right:5px;
                    vertical-align: top;
                  }

                  #univis-datepicker-year{
                    display:inline-block;
                    width:60px;
                    font-size: 12px;
                    font-weight: bold;
                    padding:3px;
                    text-align:center;
                    vertical-align: top;
                  }

                  #univis-datepicker-days table {
                      border-collapse: collapse; /* IE7 and lower */
                      border-spacing: 0;
                      width: 100%;
                      border: solid #ccc 1px;
                      -moz-border-radius: 6px;
                      -webkit-border-radius: 6px;
                      border-radius: 6px;
                      -webkit-box-shadow: 0 1px 1px #ccc;
                      -moz-box-shadow: 0 1px 1px #ccc;
                      box-shadow: 1px 1px 1px .5px #aaa;
                  }
                  #univis-datepicker-days table th{
                    text-align: center;
                  }
                  #univis-datepicker-days table td{
                    text-align: center;
                    padding:1px;
                    box-sizing: border-box;
                  }
                  #univis-datepicker-days table tr td[data-day="0"] button, #univis-datepicker-days table tr td[data-day="6"] button{
                    color:red;
                  }
                  #univis-datepicker-days table td button{
                    border:none;
                    border-radius: 2px;
                    background-color: transparent;
                    text-align: center;
                    display:block;
                    width:25px;
                    height:25px;
                    cursor:pointer;
                  }
                  #univis-datepicker-days table td button:hover{
                    background-color: gray;
                    color:white;
                  }
                  #univis-datepicker-today{
                    display:inline-block;
                    width:100%;
                    box-sizing: border-box;
                    padding:4px;
                  }



      .time-input{
        padding:.5em;
        background-color: white;
        border:1px solid var(--input_default_border_color);
        border-radius: .25em;
        box-sizing: border-box;
        box-shadow: var(--box_shadow);
      }
      .time-input:focus{
        outline:none;
        border:1px solid var(--input_focus_border_color);
      }

      .button{
        padding-top:.5em;
        padding-bottom:.5em;
        padding-left:.7em;
        padding-right:.7em;
        border:none;
        border-radius: .25em;
        cursor:pointer;
        font-size: 1em;
        box-shadow: var(--box_shadow);
      }
      .button:hover{

      }
      .button:active{

      }

      .button-outline{
        color:inherit;
        background-color: transparent;
        border:1px solid gray;
        box-shadow:none;
      }
      .button-outline:hover{
        border:1px sollid black;
      }
      .button-outline:active{
        transform:translateY(1px);
      }
      .button-outline.toggled{
        border:1px sollid black;
      }

      .button-opaque{
        color:inherit;
        background-color: transparent;
        border:none;
        box-shadow:none;
      }
      .button-opaque:hover{
        box-shadow: 0px 0px .03em .08em gray;
      }
      .button-opaque:active{
        box-shadow: 0px 0px .15em .15em gray;
      }
      .button-opaque.toggled{
        box-shadow: 0px 0px .15em .15em gray;
      }

      .button-fail{
        color: #fff;
        background: var(--fail_background_color);
        box-shadow: 0px 0px .03em .08em var(--fail_box_shadow);
      }
      .button-fail:hover{
        background-color: var(--fail_hover_color);
      }
      .button-fail:active{
        box-shadow: 0px 0px .15em .15em var(--fail_box_shadow);
      }
      .button-fail.toggled{
        box-shadow: 0px 0px .15em .15em var(--fail_box_shadow);
      }

      .button-success{
        color: #fff;
        background: var(--success_background_color);
        box-shadow: 0px 0px .03em .08em var(--success_box_shadow);
      }
      .button-success:hover{
        background-color: var(--success_hover_color);
      }
      .button-success:active{
        box-shadow: 0px 0px .15em .15em var(--success_box_shadow);
      }
      .button-success.toggled{
        box-shadow: 0px 0px .15em .15em var(--success_box_shadow);
      }

      .button-warning{
        color: #fff;
        background: var(--warning_background_color);
        box-shadow: 0px 0px .03em .08em var(--warning_box_shadow);
      }
      .button-warning:hover{
        background-color: var(--warning_hover_color);
      }
      .button-warning:active{
        box-shadow: 0px 0px .15em .15em var(--warning_box_shadow);
      }
      .button-warning.toggled{
        box-shadow: 0px 0px .15em .15em var(--warning_box_shadow);
      }

      .button-information{
        color: #000;
        background: var(--information_background_color);
        box-shadow: 0px 0px .03em .08em var(--information_box_shadow);
      }
      .button-information:hover{
        background-color: var(--information_hover_color);
      }
      .button-information:active{
        box-shadow: 0px 0px .15em .15em var(--information_box_shadow);
      }
      .button-information.toggled{
        box-shadow: 0px 0px .15em .15em var(--information_box_shadow);
      }

      .button-active{
        color: #fff;
        background: var(--active_background_color);
        box-shadow: 0px 0px .03em .08em var(--active_box_shadow);
      }
      .button-active:hover{
        background-color: var(--active_hover_color);
      }
      .button-active:active{
        box-shadow: 0px 0px .15em .15em var(--active_box_shadow);
      }
      .button-active.toggled{
        box-shadow: 0px 0px .15em .15em var(--active_box_shadow);
      }

      .button-inactive{
        color: #fff;
        background: var(--inactive_background_color);
        box-shadow: 0px 0px .03em .08em var(--inactive_box_shadow);
      }
      .button-inactive:hover{
        background-color: var(--inactive_hover_color);
      }
      .button-inactive:active{
        box-shadow: 0px 0px .15em .15em var(--inactive_box_shadow);
      }
      .button-inactive.toggled{
        box-shadow: 0px 0px .15em .15em var(--inactive_box_shadow);
      }

      .button-light{
        color: #000;
        background: var(--light_background_color);
        box-shadow: 0px 0px .03em .08em var(--light_box_shadow);
      }
      .button-light:hover{
        background-color: var(--light_hover_color);
      }
      .button-light:active{
        box-shadow: 0px 0px .15em .15em var(--light_hover_color);
      }
      .button-light.toggled{
        box-shadow: 0px 0px .15em .15em var(--light_box_shadow);
      }

      .button-dark{
        color: #fff;
        background: var(--dark_background_color);
        box-shadow: 0px 0px .03em .08em var(--dark_box_shadow);
      }
      .button-dark:hover{
        background-color: var(--dark_hover_color);
      }
      .button-dark:active{
        box-shadow: 0px 0px .15em .15em var(--dark_box_shadow);
      }
      .button-dark.toggled{
        box-shadow: 0px 0px .15em .15em var(--dark_box_shadow);
      }

      .button-save{
        color: #fff;
        background: var(--save_background_color);
        box-shadow: 0px 0px .03em .08em var(--save_box_shadow);
      }
      .button-save:hover{
        background-color: var(--save_hover_color);
      }
      .button-save:active{
        box-shadow: 0px 0px .15em .15em var(--save_box_shadow);
      }
      .button-save.toggled{
        box-shadow: 0px 0px .15em .15em var(--save_box_shadow);
      }

      .radio-dot button{
        padding-top:.5em;
        padding-bottom:.5em;
        padding-left:1.5em;
        padding-right:.7em;
        border:none;
        border-radius: .25em;
        cursor:pointer;
        font-size: 1em;
        background-color: inherit;
      }
      .radio-dot button:active{
        transform: translateY(1px);
      }
      .radio-horizontal button{
        display:inline-block;
      }
      .radio-vertical button{
        display:block;
      }
      .radio-dot button::before{
        content:'';
        box-sizing: border-box;
        display:inline-block;
        margin-right:1em;
        width:.8em;
        height:.8em;
        border-radius: .4em;
        border:.02em solid blue;
      }
      .radio-dot .toggled::before{
        background:radial-gradient(at 53% 50%, blue 20%, white 70%);
      }

      .radio-highlight button{
        padding-top:.5em;
        padding-bottom:.5em;
        padding-left:.7em;
        padding-right:.7em;
        border:.04em solid black;
        border-radius: .25em;
        cursor:pointer;
        font-size: 1em;
        background-color: inherit;
      }

      .radio-highlight .toggled{
        background-color: blue;
        color:white;
      }

      .checkbox-button{
        padding-top:.5em;
        padding-bottom:.5em;
        padding-left:1.5em;
        padding-right:.7em;
        border:none;
        border-radius: .25em;
        cursor:pointer;
        font-size: 1em;
        background-color: inherit;
      }
      .checkbox-button::before{
        content:'\2610';
        font-size: 1.2em;
        display:inline-block;
        margin-right:1em;
        width:.8em;
        height:.8em;
      }
      .checkbox-button.checked::before{
        content:'\2611';
      }


      table.univis-datagrid {
          /* border-collapse: collapse; */
          border-spacing: 0;
          width: 100%;
      }

      .univis-datagrid {
          border: solid #ccc 1px;
          -moz-border-radius: 6px;
          -webkit-border-radius: 6px;
          border-radius: 6px;
          -webkit-box-shadow: 0 1px 1px #ccc;
          -moz-box-shadow: 0 1px 1px #ccc;
          box-shadow: 1px 1px 1px .5px #aaa;
          box-sizing: border-box;
      }

      .univis-datagrid tbody tr:hover {
          background: #fbf8e9;
          color:black;
          -o-transition: all 0.1s ease-in-out;
          -webkit-transition: all 0.1s ease-in-out;
          -moz-transition: all 0.1s ease-in-out;
          -ms-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
      }

      .univis-datagrid td, .univis-datagrid thead {
          border-left: 1px solid #ccc;
          border-top: 1px solid #ccc;
          padding: 3px 5px;
          text-align: left;
          font-family: var(--default_font);
      }

      .univis-datagrid th{
        border-left: 1px solid #ccc;
        border-top:1px solid #ccc;
        padding: 3px 5px;
        text-align: left;
        font-family: var(--default_font);
      }

      .univis-datagrid thead tr{
          color:black;
          background-color: #70707070;
          background-image: -webkit-linear-gradient(top, #cfcfcf, #70707070);
          background-image:    -moz-linear-gradient(top, #cfcfcf, #70707070);
          background-image:     -ms-linear-gradient(top, #cfcfcf, #70707070);
          background-image:      -o-linear-gradient(top, #cfcfcf, #70707070);
          background-image:         linear-gradient(top, #cfcfcf, #70707070);
          -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
          -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
          box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
          border-top: none;
          text-shadow: 0 1px 0 rgba(255,255,255,.5);
      }

      .univis-datagrid.white thead tr{
        color:rgb(13,13,13);
        background-color: white;
        background-image: -webkit-linear-gradient(top, #cfcfcf, white);
        background-image:    -moz-linear-gradient(top, #cfcfcf, white);
        background-image:     -ms-linear-gradient(top, #cfcfcf, white);
        background-image:      -o-linear-gradient(top, #cfcfcf, white);
        background-image:         linear-gradient(top, #cfcfcf, white);
      }

      .univis-datagrid.light thead tr{
        color:black;
        background-color: #70707070;
        background-image: -webkit-linear-gradient(top, #cfcfcf, #70707070);
        background-image:    -moz-linear-gradient(top, #cfcfcf, #70707070);
        background-image:     -ms-linear-gradient(top, #cfcfcf, #70707070);
        background-image:      -o-linear-gradient(top, #cfcfcf, #70707070);
        background-image:         linear-gradient(top, #cfcfcf, #70707070);
      }
      .univis-datagrid.dark thead tr{
        color:white;
        background-color: #000;
        background-image: -webkit-linear-gradient(top, #ccc, #000);
        background-image:    -moz-linear-gradient(top, #ccc, #000);
        background-image:     -ms-linear-gradient(top, #ccc, #000);
        background-image:      -o-linear-gradient(top, #ccc, #000);
        background-image:         linear-gradient(top, #ccc, #000);
      }
      .univis-datagrid.fail thead tr{
        color:white;
        background-color: #941015;
        background-image: -webkit-linear-gradient(top, #ec4a50, #941015);
        background-image:    -moz-linear-gradient(top, #ec4a50, #941015);
        background-image:     -ms-linear-gradient(top, #ec4a50, #941015);
        background-image:      -o-linear-gradient(top, #ec4a50, #941015);
        background-image:         linear-gradient(top, #ec4a50, #941015);
      }
      .univis-datagrid.success thead tr{
        color:white;
        background-color: #085210;
        background-image: -webkit-linear-gradient(top, #10a520, #085210);
        background-image:    -moz-linear-gradient(top, #10a520, #085210);
        background-image:     -ms-linear-gradient(top, #10a520, #085210);
        background-image:      -o-linear-gradient(top, #10a520, #085210);
        background-image:         linear-gradient(top, #10a520, #085210);
      }
      .univis-datagrid.warning thead tr{
        color:white;
        background-color: #816205;
        background-image: -webkit-linear-gradient(top, #f4b909, #816205);
        background-image:    -moz-linear-gradient(top, #f4b909, #816205);
        background-image:     -ms-linear-gradient(top, #f4b909, #816205);
        background-image:      -o-linear-gradient(top, #f4b909, #816205);
        background-image:         linear-gradient(top, #f4b909, #816205);
      }
      .univis-datagrid.information thead tr{
        color:white;
        background-color: #0b6c6e;
        background-image: -webkit-linear-gradient(top, #15d1d5, #0b6c6e);
        background-image:    -moz-linear-gradient(top, #15d1d5, #0b6c6e);
        background-image:     -ms-linear-gradient(top, #15d1d5, #0b6c6e);
        background-image:      -o-linear-gradient(top, #15d1d5, #0b6c6e);
        background-image:         linear-gradient(top, #15d1d5, #0b6c6e);
      }
      .univis-datagrid.active thead tr{
        color:white;
        background-color: #0b366d;
        background-image: -webkit-linear-gradient(top, #1e77ea, #0b366d);
        background-image:    -moz-linear-gradient(top, #1e77ea, #0b366d);
        background-image:     -ms-linear-gradient(top, #1e77ea, #0b366d);
        background-image:      -o-linear-gradient(top, #1e77ea, #0b366d);
        background-image:         linear-gradient(top, #1e77ea, #0b366d);
      }

      .univis-datagrid td:first-child, .univis-datagrid th:first-child {
          border-left: none;
      }

      .univis-datagrid th:first-child {
          -moz-border-radius: 6px 0 0 0;
          -webkit-border-radius: 6px 0 0 0;
          border-radius: 6px 0 0 0;
      }

      .univis-datagrid th:last-child {
          -moz-border-radius: 0 6px 0 0;
          -webkit-border-radius: 0 6px 0 0;
          border-radius: 0 6px 0 0;
      }

      .univis-datagrid th:only-child{
          -moz-border-radius: 6px 6px 0 0;
          -webkit-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
      }

      .univis-datagrid tr:last-child td:first-child {
          -moz-border-radius: 0 0 0 6px;
          -webkit-border-radius: 0 0 0 6px;
          border-radius: 0 0 0 6px;
      }

      .univis-datagrid tr:last-child td:last-child {
          -moz-border-radius: 0 0 6px 0;
          -webkit-border-radius: 0 0 6px 0;
          border-radius: 0 0 6px 0;
      }

      .univis-datagrid.borderless tr td{
        border:none;
      }





            .sortableCol{
              cursor:pointer;
            }

      .univis-disabled{
        /* -webkit-filter: blur(.5px);
        -moz-filter: blur(.5px);
        -o-filter: blur(.5px);
        -ms-filter: blur(.5px);
        filter: blur(.5px); */
        background-color: #ddd;
      }
            .univis-disabled > *{
              opacity: .5;
            }

      .modal{
        position:fixed;
        top:0px;
        left:0px;
        display:none;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,.5);
        z-index:100;
      }

      .modal-palette{
        background-color:white;
        width:800px;
        margin:auto;
        margin-top:1em;
        /* border:.1em solid gray; */
        border-radius: 10px;
        box-shadow: inset 1px 1px 3px lightgray, 0em 0em .3em .1em rgba(0,0,0,.7);
      }

      .modal-header{
        width:100%;
        border-bottom:.1em solid lightgray;
        padding:.2em;
        position:relative;
        box-sizing: border-box;
      }
      .modal-header h1{
        font-size: 1.5em;
        font-weight: 100;
        margin-left:10px;
      }
      .modal-header .modal-close{
        position:absolute;
        top:0em;
        right:0em;
        background-color: inherit;
        border:none;
        color:gray;
        font-size: 1.5em;
        cursor:pointer;
      }

      .modal-body{
        position: relative;
        padding:.5em;
        box-sizing: border-box;
        width:100%;
      }

      .modal-footer{
        width:100%;
        border-top:.1em solid lightgray;
        padding:.5em;
        text-align: right;
        box-sizing: border-box;
      }

      @media only screen and (max-width: 812px){
        .modal-palette{
          width:600px;
        }
      }

      @media only screen and (max-width: 612px){
        .modal-palette{
          width:400px;
        }
      }

      @media only screen and (max-width: 412px){
        .modal-palette{
          width:95%;
        }
      }

/* components */

/* icons */
      i{
        height:1em;
        width:1em;
        position:relative;
        color:inherit !important;
      }
/* icons */

/* download indicator */
.downloading-indicator{
  position:absolute;
  top:0;left:0;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:rgba(0,0,0,.6);
  color:white;
  z-index: 99999999;
}
.downloading-indicator-message{
  display:inline-block;
  margin-left:10px;
}
.downloading-indicator-spinner {
  display:inline-block;
  border: 4px solid rgba(0,0,0,.3);
  border-radius: 50%;
  border-top: 4px solid white;
  width: 15px;
  height: 15px;
  -webkit-animation: downloading-indicator-spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes downloading-indicator-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes downloading-indicator-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* download indicator */
30087