/* The Close Button */
.pidlddc-help-dialog-close {
    color: #aaaaaa;
    float: right;
    font-size: medium;
    font-weight: bold;
}

.pidlddc-help-dialog-close:hover,
.pidlddc-help-dialog-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

input.pidlddc-input-key.pidlddc-input-logo[type="text"] {
    background-position: 100%;
    background-repeat: no-repeat;
}

/* Busydiv block styles. */
.pidlddc-busy-block {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2000;
    background: #fff;
    opacity: 0.85;
}

.pidlddc-busy-block > div {
    top: 50%;
    left: 50%;
    margin-top: 0px;
}

.pidlddc-logo-image {
	height: 30px;
    margin-right: 6px; 
}

/* Busydiv progress styles. Extracted from http://getmwf.com/components/status/progress.html */
progress.c-progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  min-width: 296px;
  height: 4px; }

progress.c-progress::-webkit-progress-bar {
  background: rgba(0, 0, 0, 0.2); }

progress.c-progress::-webkit-progress-value {
  background: #0078D7; }

progress.c-progress::-moz-progress-bar {
  background: #0078D7; }

progress.c-progress > [role="progressbar"] {
  display: block;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  min-width: 296px;
  width: 100%;
  height: 4px; }
  progress.c-progress > [role="progressbar"] > span {
    display: block;
    position: relative;
    height: 100%;
    background: #0078D7;
    color: #0078D7; }

.c-progress {
  display: block;
  margin-top: 12px; }
 .c-progress.f-indeterminate-local {
    position: relative; }
    .c-progress.f-indeterminate-local span {
      position: absolute;
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      -webkit-animation: orbit 5.5s infinite;
      animation: orbit 5.5s infinite;
      }
      .c-progress.f-indeterminate-local span:after {
        content: '';
        position: absolute;
        border-radius: 100%;
        background: #0078D7;
        }
      .c-progress.f-indeterminate-local span:nth-child(2) {
        -webkit-animation-delay: 240ms;
                animation-delay: 240ms; }
      .c-progress.f-indeterminate-local span:nth-child(3) {
        -webkit-animation-delay: 480ms;
                animation-delay: 480ms; }
      .c-progress.f-indeterminate-local span:nth-child(4) {
        -webkit-animation-delay: 720ms;
                animation-delay: 720ms; }
      .c-progress.f-indeterminate-local span:nth-child(5) {
        -webkit-animation-delay: 960ms;
                animation-delay: 960ms; }
    .c-progress.f-indeterminate-local.f-progress-small {
      width: 20px;
      height: 20px; }
      .c-progress.f-indeterminate-local.f-progress-small span {
        width: 25px;
        height: 25px; }
        .c-progress.f-indeterminate-local.f-progress-small span:after {
          width: 3px;
          height: 3px; 
        }

@-webkit-keyframes dots {
  0%,
  20% {
    left: 0;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 0; }
  25% {
    opacity: 1; }
  35% {
    left: 45%;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
  65% {
    left: 55%;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  75% {
    opacity: 1; }
  80%,
  100% {
    left: 100%;
    opacity: 0; } 
}

@keyframes dots {
  0%,
  20% {
    left: 0;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 0; }
  25% {
    opacity: 1; }
  35% {
    left: 45%;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
  65% {
    left: 55%;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  75% {
    opacity: 1; }
  80%,
  100% {
    left: 100%;
    opacity: 0; } 
}
 

@-webkit-keyframes orbit {
  0% {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  7% {
    -webkit-transform: rotate(345deg);
            transform: rotate(345deg);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
  30% {
    -webkit-transform: rotate(455deg);
            transform: rotate(455deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  39% {
    -webkit-transform: rotate(690deg);
            transform: rotate(690deg);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
  70% {
    -webkit-transform: rotate(815deg);
            transform: rotate(815deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  75% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  76% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg);
    opacity: 0; } 
}

@keyframes orbit {
  0% {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
  7% {
    -webkit-transform: rotate(345deg);
    transform: rotate(345deg);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    }
  30% {
    -webkit-transform: rotate(455deg);
    transform: rotate(455deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    }
  39% {
    -webkit-transform: rotate(690deg);
    transform: rotate(690deg);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    }
  70% {
    -webkit-transform: rotate(815deg);
    transform: rotate(815deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
  75% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
  76% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
    opacity: 0;
    }
  100% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
    opacity: 0;
    } 
}

/* errorStroke styles */
button.pidlddc-errorstroke,input.pidlddc-errorstroke,input[type=text].pidlddc-errorstroke,select.pidlddc-errorstroke,div.pidlddc-errorstroke {
  border-color: rgba(232,17,35,.6)
}

div.pidlddc-errorstroke {
  border-style: solid;
  border-width: 1px;
}

button.pidlddc-errorstroke:hover,input.pidlddc-errorstroke:hover,input[type=text].pidlddc-errorstroke:hover,select.pidlddc-errorstroke:hover {
  border-color: #e81123
}

button.pidlddc-errorstroke:focus,input.pidlddc-errorstroke:focus,input[type=text].pidlddc-errorstroke:focus,select.pidlddc-errorstroke:focus {
  background-color: rgba(232,17,35,.2);
  border-color: rgba(232,17,35,.6)
}

button.pidlddc-errorstroke:focus:hover,input.pidlddc-errorstroke:focus:hover,input[type=text].pidlddc-errorstroke:focus:hover,select.pidlddc-errorstroke:focus:hover  {
  background-color: rgba(232,17,35,.2);
  border-color: #e81123
}

@media screen and (-ms-high-contrast:black-on-white) {
    input.pidlddc-errorstroke, select.pidlddc-errorstroke {
        border-color: rgba(55,0,110,.6);
    }

        input.pidlddc-errorstroke:hover, select.pidlddc-errorstroke:hover {
            border-color: #37006e;
        }

        input.pidlddc-errorstroke:focus, select.pidlddc-errorstroke:focus {
            background-color: rgba(55,0,110,.2);
            border-color: rgba(55,0,110,.6);
        }

            input.pidlddc-errorstroke:focus:hover, select.pidlddc-errorstroke:focus:hover {
                background-color: rgba(55,0,110,.2);
                border-color: #37006e;
            }
}


@media screen and (-ms-high-contrast:white-on-black) {
    input.pidlddc-errorstroke, select.pidlddc-errorstroke {
        border-color: rgba(27,236,255,.6);
    }

        input.pidlddc-errorstroke:hover, select.pidlddc-errorstroke:hover {
            border-color: #1becff;
        }

        input.pidlddc-errorstroke:focus, select.pidlddc-errorstroke:focus {
            background-color: rgba(27,236,255,.2);
            border-color: rgba(27,236,255,.6);
        }

            input.pidlddc-errorstroke:focus:hover, select.pidlddc-errorstroke:focus:hover {
                background-color: rgba(27,236,255,.2);
                border-color: #1becff;
            }
}

/*Error block*/
.pidlddc-error-block {
    color:red;
    text-wrap:normal;
}

.pidlddc-error {
    color:red;
    display:block;
}

.pidlddc-input-text,
.pidlddc-input-dropdown {
    width: 100%;
}

.pidlddc-group-inline .pidlddc-div-property {
    display: inline-block;
}

.pidlddc-text-bold {
    font-weight: bold;
}

.pidlddc-col-1 {
    width: 8.33%;
    width: calc(100% / 12);
}

.pidlddc-col-2 {
    width: 16.67%;
    width: calc(100% / 12 * 2);
}

.pidlddc-col-3 {
    width: 25%;
    width: calc(100% / 12 * 3);
}

.pidlddc-col-4 {
    width: 33.33%;
    width: calc(100% / 12 * 4);
}

.pidlddc-col-5 {
    width: 41.67%;
    width: calc(100% / 12 * 5);
}

.pidlddc-col-6 {
    width: 50%;
    width: calc(100% / 12 * 6);
}

.pidlddc-col-7 {
    width: 58.33%;
    width: calc(100% / 12 * 7);
}

.pidlddc-col-8 {
    width: 66.67%;
    width: calc(100% / 12 * 8);
}

.pidlddc-col-9 {
    width: 75%;
    width: calc(100% / 12 * 9);
}

.pidlddc-col-10 {
    width: 83.33%;
    width: calc(100% / 12 * 10);
}

.pidlddc-col-11 {
    width: 91.67%;
    width: calc(100% / 12 * 11);
}

.pidlddc-col-12 {
    width: 100%;
    width: calc(100% / 12 * 12);
}

.pidlddc-pad-right-2x {
    padding-right: 4px;
}

.pidlddc-pad-right-4x {
    padding-right: 8px;
}

.pidlddc-float-left {
    float: left;
}

.pidlddc-input-buttonlist {
    width: 100%;
    font-size: 15px;
    height: 50px;
    border: none;
    text-align: left;
    vertical-align: top;
    padding-left: 10px;
}

.pidlddc-input-buttonlist:nth-child(even) {
    background: none;
}

.pidlddc-input-buttonlist:nth-child(odd) {
    background: rgba(0, 0, 0, 0.1);
}

.pidlddc-input-buttonlist:hover {
    background: rgb(0, 120, 215);
    color: white; 
}

.pidlddc-input-buttonlist > .pidlddc-logo-image {
    margin-right: 20px;
    width: 40px;
    vertical-align: middle;
}

.pidlddc-input-buttonlist > .pidlddc-button.pidlddc-action-trigger {
    float: right;
    color: #37006e;
}

.pidlddc-input-buttonlist > .pidlddc-button.pidlddc-action-trigger:hover {
    background: rgb(0, 120, 215);
    color: white; 
}
