@import "https://fonts.googleapis.com/css?family=Roboto:400,500,700";

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
    border: 0;
    font-family: inherit;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: left;
}

body { 
    background: #B0B0B0;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    margin:0px; 
}

h1, h2 {
    font-family: 'Cute Font', sans-serif;
}

h1 {
    color: white;
    font-size: 36px;
    padding: 0px 10px 0px 0px;
    text-align: right;
}

h2 {
    color: #bcbcbc;
    font-size: 18px;
    padding: 0px 10px 0px 0px;
    text-align: right;
}

h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

header {
    background: linear-gradient(163deg, #1B2A35 -10%, #008999 120%);
    border-bottom: 1px solid #000000;
    float: left;
    height: 60px;    
    margin-bottom: 5px;
    width: 960px;
}

footer {
    background: #1B2A35;
    border-top: 1px solid #000000;
    color: #bcbcbc;
    float:left;
    font-size: 12px;
    height:60px;
    margin-top: 5px;
    padding: 0px 10px;
    text-align: left;
    width:940px;
}

code {
    background-color: #e1e1e1;
    font-family: monospace, sans-serif;
}

strong { font-weight: bold;}
em {font-style: italic;}
u {text-decoration: underline;}

#wrapper {
    background: #FFFFFF;
    margin: 0px auto 0px auto;
    min-height: 100%;
    width: 960px;
}

#options {
    float:left;
    width:960px;
}

#selectors-left, #selectors-right {
    background: rgba(0, 137, 153, 0.05);
    float:left;
    width:468px;
    margin: 5px;
}

#results {
    float:left;
    height: auto;
    margin-top: 20px;
    width:960px;
}

.invisible {display: none;}
.visible {display: block;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}

.selectors-title, .results-title {
    background: linear-gradient(to right, #008999, #2C3A44);
    color: #FFFFFF;
    /*font-family: 'Cute Font', sans-serif;
    font-size: 30px;
    min-height: 28px;
    padding: 2px 5px 0px 5px;
    */
    font-size: 18px;
    font-weight: bold;
    min-height: 25px;
    padding: 5px 5px 0px 5px;
}

.griffin {
    background-image: url(https://www.axway.com/themes/custom/axway/img/griffin-aqua.svg);
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    height: 60px;
    width: 60px; 
}

.axway {
    color: rgba(255,255,255,0.7);
    float: left;
    font-size: 36px;
    font-weight: bold;
    height: 60px;
    padding: 7px 0px 0px 5px;
    width: 60px;
}

.selectors-title {
    border-radius: 5px 5px 0px 0px;
}

.not-supported {
    float: left;
    margin: 5px;
    padding: 5px;
    color: red;
    font-weight: bold;
    background: #f5e5e3;
    border-radius: 5px;
    line-height: 20px;
}

.copy-plaintext {
    background: rgba(0, 137, 153, 0.05);
    border-color: rgba(0, 137, 153, 0.3);
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-radius: 5px;
    color: rgba(0, 137, 153, 0.7);
}

.copy-plaintext:hover {
    border-color: rgba(0, 137, 153, 1);
    color: rgba(0, 137, 153, 1);
    cursor: pointer !important;
}

.copy-success {
    font-size: 12px;
    color: green;
}

.field-row, .field-title, .field-title-small, .field-input,
.info-container, .info-title, .info-info, .information, 
.info-container-large, .info-container-feats  {
    float: left;
}

.field-row {
    /*height: 35px;*/
    width: 100%;
}

.field-title, .field-input {
    margin: 5px;
}

.field-title {
    font-weight: bold;
    padding: 5px 0px 0px 0px;
    text-align: right;
    width: 120px;
}

.field-title-small {
    font-size: 11px;
    font-style: italic;
    margin: 5px;
}

.field-text-value {
    font-size: 20px;
    padding-left: 5px;
    margin-top: 4px;
    text-transform: uppercase;
}

.field-radio {
    float: left; 
    margin-top: 3px;
    margin-right: 5px;
}

.field-radio span {
    float: right;
    margin: 3px 0px 0px 3px;
}

.dropdown {
    border: 1px solid rgba(0, 137, 153, 0.3);
    border-radius: 5px;
    color: #008999;
    padding: 2px;
    width: 150px;
}

.checkboxes-container {
    background: rgba(0, 137, 153, 0.2);
    border-radius: 5px;
    float: left;
    margin: 5px 2px;
}

.checkboxes-container input {
    margin: 5px 2px 0px 0px;
}

.buttons {
    /*
    background: repeating-linear-gradient(
      45deg,
      rgba(0, 137, 153, 0.2),
      rgba(0, 137, 153, 0.2) 10px,
      rgba(0, 137, 153, 0.3) 10px,
      rgba(0, 137, 153, 0.3) 20px
    );
    height: 5px;
    margin-bottom: 27px;
    margin-top: 10px;
    position: relative;
    
    */
    border-bottom: 1px solid rgba(0, 137, 153, 0.3);
    height: 40px;
    margin-bottom: 10px;
    padding: 2px 5px;
    width: 458px;
}

/*.buttons-proper {
	background: rgb(0, 137, 153);
    border: 2px solid #FFFFFF;
	border-radius: 20px;
	color: white;
	cursor: pointer;
	text-decoration: none;
	font-family: 'Cute Font', sans-serif;
    font-size: 30px;
    font-weight: 400;
	padding: 0px 10px;
    position: relative;
    top: -16px;
    z-index: 10;
}

.buttons-proper:hover {
    background: #FFFFFF;
    border: 2px solid rgb(0, 137, 153);
    color: rgb(0, 137, 153);
}
*/

/* red buttons */
.buttons-proper {
	background-color: rgba(230, 47, 51, 1);
	border-radius: 30px;
	color: #fff !important;
	cursor: pointer;
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
	padding: 8px 15px 10px 15px;
	text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
}

.buttons-proper-small {
    width: 4px;
}
.fa-redo::before {
    margin-left: -5px;
}


.buttons-proper:hover {
    text-shadow: 0 1px 0 #ebebeb;
    opacity: 0.7 !important;
}

.information {
    padding-bottom: 10px;
    width: 470px;
}

.info-container {
    height: auto;
    width: 230px;
}

.info-container-large {
    height: auto;
    width: 460px;
    margin: 0px 10px 5px 10px;
}

.info-container-feats {
    height: auto;
    width: 445px;
    margin: 0px 10px 5px 10px;
}

.info-title {
    background: #C5C5C5;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
    margin: 5px 0px 0px 6px;
    padding: 2px 0px;
    text-align: center;
    width: 225px;
}

.info-info {
    background: #FFFFFF;
    border-bottom: 3px solid gray;
    border-radius: 0px 0px 7px 7px;
    line-height: 1.25em;
    margin: 0px 0px 0px 6px;
    padding: 5px;
    width: 215px;
}

.results-inner-wrapper, .results-inner-wrapper-header, .results-title, .results-section-title  {
    float: left;
}

.results-inner-wrapper-header {
    border-bottom: 1px #008999 solid;
    float: left;
    margin: 5px 0px 0px 0px;
    padding-left: 10px;
    padding-right: 10px;
    width: 940px;
}

.results-inner-wrapper {
    height: auto;
    margin: 5px;
    width: 950px;
}

.results-title {
    width: 950px;
}

.results-section-title {
	font-size: 16px;
    font-style: italic;
    padding: 5px 10px;
    margin: 10px 0px;
    width: 880px;
}

.results-text,
.results-text-plain {
    border: 1px solid rgba(0, 137, 153, 0.2);
    border-radius: 5px;
    float:left;
    font-size: 16px;
    margin: 0px 0px 10px 40px;
    min-height: 20px;
    padding: 5px 10px;
    width: 840px;
    height: auto;    
}

.results-text-plain {
    
}

.results-chain-display {
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    text-transform: uppercase;
}

.results-tab {
    background: #fff;
    border-color: #008999;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-radius: 5px 5px 0px 0px;
    color: #2C3A44;
    cursor: pointer;
    float: left;
    font-weight: bold;
    margin-right: 1px;
    padding: 10px 30px;
}

.results-tab-active, .results-tab:hover {
    background: linear-gradient(to right, #008999, #2C3A44);
    color: #FFFFFF;
}

.results-tab-active:hover  {
    cursor: default !important;
}

.results-tab:hover {
    cursor: pointer;
}

.results-tab-title {
    color: #c3c3c3;
    float: right;
    font-size: 20px;
    /*
    color: #008999;
    font-family: 'Cute Font', sans-serif;
    min-height: 28px;
    padding: 2px 5px 0px 5px; */
    padding: 5px 5px 0px 5px;
}

/*
.results-but-showhide {
	background: rgba(0, 137, 153, 0.2);
	border-radius: 20px;
	color: #2C3A44;
    cursor: pointer;
	font-family: 'Cute Font', sans-serif;
    font-size: 20px;
    font-weight: 300;
	padding: 0px 10px;
	text-decoration: none;
}

.results-but-showhide-closed {
	background: rgb(0, 137, 153);
	color: #FFFFFF;
}
*/
.results-but-showhide {
	background: rgba(230, 47, 51, 0.5);
	border-radius: 20px;
	color: #FFFFFF;
    cursor: pointer;
	font-family: 'Roboto';
    font-size: 12px;
    font-weight: 400;
	padding: 5px 10px;
	text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #ebebeb;
}

.results-but-showhide-closed {
	background-color: rgba(230, 47, 51, 1);
	color: #FFFFFF;
    text-shadow: 0 1px 0 #fff;
}


.popup-baloon {
    background-color: #FFFFCC !important;
    border-radius: 5px;
    padding: 5px !important;
    z-index: 99999;
}
.popup-baloon-content {
    font-size: 11px;
    margin: 0px 0px 0px 2px;
}

.pop-info-cdg, .pop-info-ccd, .pop-info-fib {
    float: right;
    margin: 4px 5px 0px 0px;
}

.pop-info-db {
    margin: 4px 5px 0px 0px;
}

.pop-info-select-cluster {
    margin: 10px 5px;
}

.icon-12 {font-size: 12px !important;}
.icon-14 {font-size: 14px !important;}
.icon-16 {font-size: 16px !important;}
/*.icon-20 {font-size: 20px !important;}*/

.icon-color-blue {color: #0099FF;}
.icon-color-green {color: green;}
.icon-color-red {color: rgba(230, 47, 51, 1);}
.icon-color-axway {color: #008999;}

.icon-cdg, .icon-ccd, .icon-fib {
    margin: 3px 5px 2px 0px;
}

.icon-up-info-msg {
    color: #008999;
    float: left;
    font-size: 32px;
    margin: -3px 5px 0px 0px;
}

.doc-block {
    background: rgba(0, 137, 153, 0.05);
    border-radius: 10px;
    float: left;
    margin: 5px;
    min-height: 10px;
    padding: 0px 0px 10px 0px;
    width: 830px;
}

.doc-block-title {
    border-radius: 3px 3px 0px 0px;
    background: linear-gradient(to right, #008999, #2C3A44);
    color: #FFFFFF;
    padding: 5px;
}

.doc-block-title-small {
    font-size: 14px;
}

.doc-row {
    float: left;
    margin-left: 15px;
    width: 31%;
}

.doc-link {
    color: #008999;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
}

.doc-link:hover {
    text-decoration: underline; 
}

.doc-link-inline {
    color: #008999;
    text-decoration: none;
}

.doc-link-inline:hover {
    text-decoration: underline;
}

.up-info-msg {
    background: rgba(255, 255, 241, 0.28);
    border: 1px dotted #EAD014;
    border-radius: 5px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.3em;
    margin: 5px 5px 10px 20px;
    padding: 10px;
    width: 780px;
}

.up-info-msg-red {
    color: red; 
    font-weight: bold;
}

.up-info-msg-cluster-txt {
    font-size: 13px;
    font-style: normal;
    line-height: 1.4em;
}

.up-info-msg-cluster-txt-title {
    font-weight: bold;
    text-decoration: underline;
}

.up-step-block {
    margin: 10px 5px 10px 5px;
}

.up-step-block h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0px 10px 0px;
}

.pack-row  {
    font-size: 14px;
    line-height: 1.3em;
    margin: 0px 0px 5px 10px;
}

.pack-link {
    color: #008999;
    text-decoration: none;
}

.pack-link:hover {
    text-decoration: underline;
}

.up-ref-to-doc-text {
    font-size: 13px;
    font-style: italic;
    line-height: 1.3em;
    margin: 0px 0px 5px 10px;
}

.up-notes-block {
    margin-left: 30px;
    width: 780px; 
}

.spec-notes-row,
.spec-notes-row-red {
    border-radius: 5px;
    border-style: dotted;
    border-width: 1px;    
    float: left;
    font-size: 12px;
    margin: 0px 5px 5px 0px;
    padding: 5px;
    width: auto;
}

.spec-notes-row {
    border-color: rgba(0, 137, 153, 0.3);
    background: rgba(0, 137, 153, 0.05);
    color: #006672;
    /*color: rgba(0, 137, 153, 0.7);*/
}

.spec-notes-row-red {
    border-color: rgba(205, 10, 10, 0.3);
    background: rgba(205, 10, 10, 0.05);
    color: #cd0a0a;
}

.bounce {
    animation: bounce 1s infinite;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0);} 
    40% {-webkit-transform: translateX(-3px);}
    60% {-webkit-transform: translateX(-5px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateX(0);}
    40% {-moz-transform: translateX(-3px);}
    60% {-moz-transform: translateX(-5px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateX(0);}
    40% {-o-transform: translateX(-3px);}
    60% {-o-transform: translateX(-5px);}
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
    40% {transform: translateX(-3px);}
    60% {transform: translateX(-5px);}
}


#loader {
    position: absolute;
    width: 960px;
    background: #F2F2F2;
    z-index: 99999;
    float: left;
}

.loader {
    float:left;
    border: 48px solid rgba(0, 137, 153, 0.3);
    border-radius: 50%;
    border-top: 48px solid #008999;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}