:root {
    --color_0: 255,255,255;
    --color_1: 255,255,255;
    --color_2: 0,0,0;
    --color_3: 237,28,36;
    --color_4: 0,136,203;
    --color_5: 255,203,5;
    --color_6: 114,114,114;
    --color_7: 176,176,176;
    --color_8: 255,255,255;
    --color_9: 114,114,114;
    --color_10: 176,176,176;
    --color_11: 43,43,43;
    --color_12: 85,85,85;
    --color_13: 128,128,128;
    --color_14: 213,213,213;
    --color_15: 255,255,255;
    --color_16: 50,41,32;
    --color_17: 99,82,63;
    --color_18: 149,123,95;
    --color_19: 198,164,126;
    --color_20: 227,207,185;
    --color_21: 22,62,60;
    --color_22: 43,125,119;
    --color_23: 65,187,179;
    --color_24: 141,210,205;
    --color_25: 182,232,229;
    --color_26: 38,27,44;
    --color_27: 77,53,89;
    --color_28: 115,80,133;
    --color_29: 162,139,174;
    --color_30: 205,186,214;
    --color_31: 30,54,67;
    --color_32: 59,107,134;
    --color_33: 89,161,201;
    --color_34: 158,197,219;
    --color_35: 193,221,237;
    --font_0: normal normal bold 21px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    --font_1: normal normal normal 16px/1.4em din-next-w01-light,din-next-w02-light,din-next-w10-light,sans-serif;
    --font_2: normal normal normal 24px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    --font_3: normal normal normal 120px/1.4em lulo-clean-w01-one-bold,lulo-clean-w05-one-bold,sans-serif;
    --font_4: normal normal normal 40px/1.4em lulo-clean-w01-one-bold,lulo-clean-w05-one-bold,sans-serif;
    --font_5: normal normal normal 28px/1.4em lulo-clean-w01-one-bold,lulo-clean-w05-one-bold,sans-serif;
    --font_6: normal normal normal 22px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    --font_7: normal normal normal 18px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    --font_8: normal normal normal 15px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    --font_9: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    --font_10: normal normal normal 12px/1.4em din-next-w01-light,din-next-w02-light,din-next-w10-light,sans-serif;
}

@font-face {
    font-display: block;
    font-family:"Avenir-LT-W01_35-Light1475496";
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/edefe737-dc78-4aa3-ad03-3c6f908330ed.eot?#iefix");
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/edefe737-dc78-4aa3-ad03-3c6f908330ed.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0078f486-8e52-42c0-ad81-3c8d3d43f48e.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/908c4810-64db-4b46-bb8e-823eb41f68c0.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/4577388c-510f-4366-addb-8b663bcc762a.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/b0268c31-e450-4159-bfea-e0d20e2b5c0c.svg#b0268c31-e450-4159-bfea-e0d20e2b5c0c") format("svg");
}
@font-face {
    font-family: "Avenir-LT-W05_35-Light";
    src: url("//static.parastorage.com/services/santa-resources/resources/viewer/user-site-fonts/fonts/Avenir_Family_Pack/v1/AvenirLTW05-35Light.woff2") format("woff2"),
    url("//static.parastorage.com/services/santa-resources/resources/viewer/user-site-fonts/fonts/Avenir_Family_Pack/v1/AvenirLTW05-35Light.woff") format("woff");
}
@font-face {
    font-display: block;
    font-family: "DIN-Next-W01-Light";
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/3e0b2cd7-9657-438b-b4af-e04122e8f1f7.eot?#iefix");
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/3e0b2cd7-9657-438b-b4af-e04122e8f1f7.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/bc176270-17fa-4c78-a343-9fe52824e501.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/3516f91d-ac48-42cd-acfe-1be691152cc4.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/d1b1e866-a411-42ba-8f75-72bf28e23694.svg#d1b1e866-a411-42ba-8f75-72bf28e23694") format("svg");
}
@font-face {
    font-display: block;
    font-family: "DIN-Next-W02-Light";
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/48e5a0e1-2d56-46e5-8fc4-3d6d5c973cbf.eot?#iefix");
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/48e5a0e1-2d56-46e5-8fc4-3d6d5c973cbf.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/07d62b21-8d7a-4c36-be86-d32ab1089972.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/c0050890-bbed-44b9-94df-2611d72dbb06.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9f774d17-c03a-418e-a375-34f3beecbc7a.svg#9f774d17-c03a-418e-a375-34f3beecbc7a") format("svg");
}
@font-face {
    font-display: block;
    font-family: "DIN-Next-W10-Light";
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/3d009cd7-c8fe-40c0-93da-74f4ea8c530b.eot?#iefix");
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/3d009cd7-c8fe-40c0-93da-74f4ea8c530b.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/a9e95a29-98a7-404a-90ee-1929ad09c696.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0a7663fd-eae8-4e50-a67a-225271f8cceb.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/58ae9be9-5d95-44b6-8b6c-e6da6a46822c.svg#58ae9be9-5d95-44b6-8b6c-e6da6a46822c") format("svg");
}
@font-face {
    font-display: block;
    font-family:"Lulo-Clean-W01-One-Bold";
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0163ac22-50a7-406e-aa64-c62ee6fbf3d7.eot?#iefix");
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0163ac22-50a7-406e-aa64-c62ee6fbf3d7.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/aee74cb3-c913-4b54-9722-6001c92325f2.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/80de9d5d-ab5f-40ce-911b-104e51e93d7c.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/1b46b05b-cfdd-4d82-8c2f-5c6cfba1fe60.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/be340f0b-a2d4-41df-acb1-4dc124330a88.svg#be340f0b-a2d4-41df-acb1-4dc124330a88") format("svg");
}
@font-face{
    font-family:"Lulo-Clean-W05-One-Bold";
    src: url("//static.parastorage.com/services/santa-resources/resources/viewer/user-site-fonts/fonts/Lulo_Clean/v1/LuloCleanW05-OneBold.woff2") format("woff2"),
    url("//static.parastorage.com/services/santa-resources/resources/viewer/user-site-fonts/fonts/Lulo_Clean/v1/LuloCleanW05-OneBold.woff") format("woff");
}

body {
    font-size: 14px;
    font-family: Arial,Helvetica,sans-serif;
    overflow-x: auto;
    overflow-y: scroll;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, nav, object, ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, title, tr, tt, u, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}
.container {  
    height: 100%;
    display: grid;
    grid-template-columns: auto 960px auto;
    grid-template-rows: 125px 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header"
        ". content ."
        "footer footer footer";
}

.header {   
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row1-start;
    grid-area: header;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

.headercontent {
    height: 100%;
    width: 980px;
    display: grid;
    grid-template-columns: 250px auto 72px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "logo nav lang";
    align-items: center;
}

.content {
    font: normal normal normal 15px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: row2-start;
    grid-area: content;
    padding: 65px 0px 65px 84px;
}
.footer {

    font: normal normal normal 15px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;

    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row3-start;
    grid-area: footer;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    color: #808080;
    background: #000;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);

    padding: 55px 0px 9px calc((100% - 980px) * 0.5);
}

.footer .panel {
    flex-grow: 1;
    margin-bottom: 59px
}
.footer .panel.long {
    flex-grow: 2;
}

.footer .panel p {
    margin-top: 5px;
}

.footer .break {
flex-basis: 100%;
height: 0;
}

.footer a {
    text-decoration: none;
    color: #808080;
}

.title {
    letter-spacing: 0.2em;
    line-height: 20px;
    display: inline-block;
    margin-bottom: 5px;
}

.logo {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: row1-start;
    grid-area: logo; 
}

.logo img {
    height: 80px;
    display: inline-block;
}

.dlicon {
    position: absolute;
    width: 72px;
    height: 72px;
    margin-left: -84px;
    margin-top: -17;
}


.nav_menu {
    white-space: nowrap;
    font: normal normal 700 14px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: row1-start;
    grid-area: nav; 
}

.nav_menu ul {
    list-style: none;
}

.nav_menu li {
    display: inline-block;
    padding: 0 10px;
}

.nav_menu a {
    text-decoration: none;
    color: rgb(128,128,128);
    transition: color 0.4s ease 0s;
} 
.nav_menu a:hover {
    color: rgb(254, 0, 24);
    transition: color 0.4s ease 0s;
}

.language_sel {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: row1-start;
    grid-area: lang;
    align-self: start;
    padding-top: 2px;
}

.language_sel button {
    padding: 0px 4px;
    margin: 0px;
    color: white;
    background-color: rgb(43,43,43);
    border: 1px solid rgb(149,149,149); 
    border-radius: 0px 0px 0px 0px;
    font: normal normal normal 15px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    height: 23px;
}

.language_sel button.selected { background: rgb(254,0,24); }

.clas {
    width:74px;
    height:74px;
    display: inline;
    position: absolute;
    top: 28px;
    margin-left: 546px;
}


h1 {
    font: normal normal normal 28px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    margin-bottom: 20px;
}


h2 {
    font: normal normal normal 20px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    margin-top: 20px;
    margin-bottom: 5px;
}

.info {
    margin-top: 5px;
    margin-bottom: 5px;
    color: rgb(50, 50, 50);
    padding: 0px 0px 10px 0px;
}


form { 
    margin: 0px;
    padding: 0px;
}

.big {
    font-size:  21px;
    margin: 20px 0px 20px;
    display: flex;
    align-items: center;
}

.big label {
    padding-right: 20px;
    line-height: 24px;
}

.big input[type=text] {
    font-size:  24px;
    font-weight: normal;
    border: 2px solid rgb(254, 0, 24);
    border-radius: 4px;

    margin-right: -3px;
    margin-top: 0px;
    line-height: 24px;
    padding-bottom: 2px;

    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.45);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.45);
}




.formpanel {
    padding: 15px 20px;
    color: rgb(50, 50, 50);
    background-color: rgb(244, 244, 244);
    border: 1px solid rgb(225, 225, 225);
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
}

.formpanel .extend {
    width: 44%;
}

.accountInfo {
    color: rgb(75, 75, 75);
    border-top: 1px solid rgb(225, 225, 225);
    margin-top: -20px;
    margin-bottom: 30px;
    padding-top: 5px;
    font-size: 12px;
}

.acctCli {
    display: inline;
}

.acctFSC {
    float: right;
}


p { padding-bottom: 10px; }

.formFooter {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.formFooter .grow { flex-grow: 1; }

.formFooter .right { align-self: flex-end; }

.formFooter h2 {margin-top: 0px; }

.redButton {
    background-color: rgb(254, 0, 24);
    color: white;
    /* font-weight: bold; */
    border: 0px;
    border-radius: 2px;
    padding: 8px 20px;
    line-height: 20px;
    font-size: 18px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.45);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.45);
}

input[type='radio']:disabled+label {
    pointer-events: none;
    opacity: 0.5;
}

#filenamePreview { color: rgb(75, 75, 75); }


.form {
    transition: all .33s ease;
}

#form.show {
    opacity: 1;
    /* height: 150px; */
    width: 100%;
}

#form.hide {
    opacity: 0;
    /* width: 1px; */
    display: none;
}

#progressPanel {

    min-height: 465px;;
    transition: all .33s ease;
    opacity: 0;
    display: none;
}

#progressPanel.show {
    display: block;
    opacity: 100;
}

.statusbox {
    display: grid;
    grid-template-columns: 48px auto;
    grid-template-areas: "icon text";
    gap: 12px 6px;
}

.statusbox .step {
    font-size: 18px;
    line-height: 32px;
}

.statusbox .indicator {
    /* align-self: center; */
    justify-self: center;
}




#socketDebug {
    max-height: 129px;
    overflow-y: auto;
}





.checkmark__circle {
    stroke-dasharray: 156;
    stroke-dashoffset: 313;
    stroke-width: 4;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
  }
  .checkmark__circle.animate {
    animation: stroke 2s cubic-bezier(0.65, 0, 0.45, 1) forwards infinite;
  }
  
  .checkmark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
  }

  .checkmark__circle.red {
    stroke: red;
  }

  .checkmark.pending {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ececec;
    display: block;
    stroke-width: 2;
    stroke: rgb(98, 98, 98);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #3d3d3d;
  }
  .checkmark.pending .checkmark__circle {
    opacity: 0;
  }

  .checkmark.animate {
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }
  .checkmark.animateRed {
    animation: fillred .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }

  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
  }

  .checkmark__check.animate {
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }

  .checkmark__check.inactive {
    visibility: hidden;
  }

  .checkmark__error {
    visibility: hidden;
  }

  .checkmark__error.active {
    visibility: visible;
  }



  #longRunningPseudoIndicator,
  #longRunningInfo {
    display: none;
    height: 0;
  }

  #longRunningPseudoIndicator.enable,
  #longRunningInfo.enable {
    display: block;
  }


  .infoyellow {
    font-size: 13px !important;
    line-height: 18px !important;
    background: #fffce8;
    padding: 10px;
    border: 1px solid #f7edda;
    border-radius: 3px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
    opacity: 0;
  }

  .infoyellow.appear {
    /* display: blobk !important; */
    animation: fadeIn 0.75s forwards;
    animation-name:
        expand, fadeIn;
    animation-duration:
        0.25s, 0.5s;
    animation-timing-function:
        ease-in, ease-out;
    animation-iteration-count:
        1, 1;
  }


  @keyframes expand {
    0% { height: 0; }
    100% { height: 40; }
  }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }



  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }
  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
  }
  @keyframes fillred {
    100% {
      box-shadow: inset 0px 0px 0px 30px red;
    }
  }