#container {
    position:absolute;
    height:100%;
    width:100%;
    min-width:1024px;
    top:0px;
    left:0px;
}

#main-content {
    position:relative;
    height:calc(100% - 354px);
    margin-top:9px;
    margin-left:18px;
    width:calc(100% - 36px);
    float:left;
    background-color: #bbd6fb;
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgba(151,191,252,1);
    overflow:hidden;
}

#code-content {
    position:relative;
    height:100px;
    margin-top:18px;
    margin-left:18px;
    width:calc(100% - 36px);
    float:left;
    background-color: #bbd6fb;
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgba(151,191,252,1);
    overflow:hidden;
}

#des-content {
    position:relative;
    height:200px;
    margin-top:9px;
    margin-right:18px;
    margin-left:9px;
    width:calc(100% - 36px);
    float:right;
    background-color: #bbd6fb;
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgba(151,191,252,1);
    overflow:hidden;
}

#end {
    position:relative;
    height:calc(100% - 36px);
    margin-top:18px;
    margin-right:18px;
    margin-left:18px;
    width:calc(100% - 36px);
    float:right;
    background-color: #bbd6fb;
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgba(151,191,252,1);
    overflow:hidden;
}

.header {
    top: 0px;
    position: absolute;
    height: 18px;
    width: 100%;
    text-align: center;
    line-height: 18px;
    color: white;
    font-family: convergence,sans-serif;
    background: #3261cd;
    background: -moz-linear-gradient(top,  #3261cd 0%, #2047a3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3261cd), color-stop(100%,#2047a3));
    background: -webkit-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: -o-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: -ms-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: linear-gradient(to bottom,  #3261cd 0%,#2047a3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3261cd', endColorstr='#2047a3',GradientType=0 );

}

.des {
    position:absolute;
    width:calc(100% - 36px);
    margin-left:18px;
    float:left;
    top:36px;
    background: #3261cd;
    background: -moz-linear-gradient(top,  #3261cd 0%, #2047a3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3261cd), color-stop(100%,#2047a3));
    background: -webkit-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: -o-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: -ms-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: linear-gradient(to bottom,  #3261cd 0%,#2047a3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3261cd', endColorstr='#2047a3',GradientType=0 );
    height:40px;
    border-radius:8px;
    text-align: center;
    font-size:25px;
    line-height: 40px;
    color: white;
    font-family: convergence,sans-serif;
}

.nav {
    position:absolute;
    width:calc(100% - 36px);
    margin-left:18px;
    bottom:18px;
    float:left;
    background: #3261cd;
    background: -moz-linear-gradient(top,  #3261cd 0%, #2047a3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3261cd), color-stop(100%,#2047a3));
    background: -webkit-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: -o-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: -ms-linear-gradient(top,  #3261cd 0%,#2047a3 100%);
    background: linear-gradient(to bottom,  #3261cd 0%,#2047a3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3261cd', endColorstr='#2047a3',GradientType=0 );
    height:40px;
    border-radius:8px;
    text-align: center;
    line-height: 40px;
    color: white;
    font-family: convergence,sans-serif;
}

#des-preview {
    position:absolute;
    width:calc(100% - 36px);
    margin-left:18px;
    bottom:18px;
    float:left;
    background-color: #e8e8e8;
    border-radius:8px;
    height:60px;
    border-radius:8px;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgb(212, 212, 212);
    text-align: center;
    color: #1439a7;
    font-family: convergence,sans-serif;
    line-height:normal;
    font-size:15px;
    vertical-align:middle;

}

#des-preview-text {
    padding-top:10px;
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
}

.buttons {
    position:absolute;
    width:calc(100% - 36px);
    margin-left:18px;
    float:left;
    top:85px;
    height:calc(100% - 152px);
    border-radius:8px;
    text-align: center;
    line-height: 40px;
    color: white;
    font-family: convergence,sans-serif;
    background-color: #e8e8e8;
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgb(212, 212, 212);
    overflow:auto;
}

.button {
    position:relative;
    margin-top:18px;
    margin-left:18px;
    float:left;
    height:50px;
    width:150px;
    border-radius:8px;
    background-color:#2047a3;
    font-size:20px;
    font-family:convergence, sans-serif;
    line-height:50px;
    cursor:pointer;
}

.green-button {
    position:relative;
    margin-top:18px;
    margin-left:18px;
    float:left;
    height:50px;
    width:180px;
    border-radius:8px;
    background-color:#2047a3;
    font-size:20px;
    font-family:convergence, sans-serif;
    line-height:50px;
    cursor:pointer;
    background-color:green;
}

.selected {
    position:relative;
    margin-top:18px;
    margin-left:18px;
    float:left;
    height:50px;
    width:150px;
    border-radius:8px;
    background-color:#2047a3;
    font-size:20px;
    font-family:convergence, sans-serif;
    line-height:50px;
    cursor:pointer;
    background-color:green;
}

.custom {
    position:relative;
    margin-top:18px;
    margin-left:18px;
    float:left;
    height:50px;
    width:120px;
    border-radius:8px;
    background-color:#2047a3;
    font-size:20px;
    font-family:convergence, sans-serif;
    line-height:50px;
    cursor:pointer;
}

#back-button {
    position:relative;
    float:left;
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
    height:30px;
    width:70px;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid rgb(255, 255, 255);
    color: #ffffff;
    line-height:30px;
    cursor:pointer;
}

#home-button {
    position:relative;
    float:right;
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
    height:30px;
    width:70px;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid rgb(255, 255, 255);
    color: #ffffff;
    line-height:30px;
    cursor:pointer;
}

#back-button:hover {
    position:relative;
    float:left;
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
    height:30px;
    width:70px;
    background-color: rgba(168, 168, 168, 0.12);
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid rgb(255, 255, 255);
    color: #ffffff;
    line-height:30px;
    cursor:pointer;
}

#home-button:hover {
    position:relative;
    float:right;
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
    height:30px;
    width:70px;
    background-color: rgba(168, 168, 168, 0.12);
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid rgb(255, 255, 255);
    color: #ffffff;
    line-height:30px;
    cursor:pointer;
}

#code-text-container {
    position:inherit;
    height:64px;
    top:26px;
    width:calc(100% - 36px);
    background-color: #e8e8e8;
    box-sizing: border-box;
    left:18px;
    border-radius:8px;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgb(212, 212, 212);
    text-align: center;
    color: #1439a7;
    font-family: convergence,sans-serif;
    line-height:44px;
    font-size:30px;
    vertical-align:middle;
    overflow:hidden;
}

#code-text {
    width:calc(100% - 48px);
    float:left;
    height:calc(100% - 20px);
    padding:10px;
}

#copy-code {
    position:absolute;
    width:29px;
    right:0px;
    height:100%;
    color:white;
    font-size:10px;
    line-height:10px;
    padding-top:12px;
    background-color: #2fa91f;
    cursor:pointer;
    text-align:center;
}

#copy-code:hover {
    position:absolute;
    width:29px;
    right:0px;
    height:100%;
    color:white;
    font-size:10px;
    line-height:10px;
    padding-top:12px;
    background-color: #1f7216;
    cursor:pointer;
    text-align:center;
}

#copy-desc {
    position:absolute;
    width:29px;
    right:0px;
    height:100%;
    color:white;
    font-size:10px;
    line-height:10px;
    padding-top:60px;
    background-color: #2fa91f;
    cursor:pointer;
    text-align:center;
}

#copy-desc:hover {
    position:absolute;
    width:29px;
    right:0px;
    height:100%;
    color:white;
    font-size:10px;
    line-height:10px;
    padding-top:60px;
    background-color: #1f7216;
    cursor:pointer;
    text-align:center;
}

#des-text-container {
    position:inherit;
    height:164px;
    top:26px;
    width:calc(100% - 36px);
    background-color: #e8e8e8;
    box-sizing: border-box;
    left:18px;
    border-radius:8px;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgb(212, 212, 212);
    text-align: center;
    color: #1439a7;
    font-family: convergence,sans-serif;
    line-height:normal;
    font-size:18px;
    vertical-align:middle;
    overflow:hidden;
}

#des-text {
    width:calc(100% - 48px);
    float:left;
    height:calc(100% - 10px);
    padding:10px;
}

#p9010 {
    background-color:#ffffff;
    color: #1439a7;
    border:1px solid #1439a7;
}

#p9003 {
    background-color:rgb(244,244,244);
    color: #1439a7;
    border:1px solid #1439a7;
}

#p9005 {
    background-color: rgb(0, 0, 0);
    color: rgba(255, 255, 255, 0.85);
    border:1px solid #1439a7;
}

#p9006 {
    background-color: rgb(165,165,165);
    color: #1439a7;
    border:1px solid #1439a7;
}

#p9016 {
    background-color: rgb(246,246,246);
    color: #1439a7;
    border:1px solid #1439a7;
}

#p7024 {
    background-color: rgb(071,074,081);
    color: #ffffff;
    border:1px solid #1439a7;
}

#p7001 {
    background-color: rgb(138,149,151);
    color: #1439a7;
    border:1px solid #1439a7;
}

#p7003 {
    background-color: rgb(108,112,089);
    color: #1439a7;
    border:1px solid #1439a7;
}

#paint-input {
    height:30px;
    margin-top:10px;
    margin-left:39px;
    float:left;
    margin-right:10px;
    box-sizing:border-box;
    border-radius:8px;
    width:120px;
    border:2px solid green;
    font-size:20px;
    text-align:center;
    color:green;
    font-family: convergence,sans-serif;
}

#custom-word {
    height:100%;
    float:left;
    margin-left:20px;
}

#paint-ok-button {
    height:30px;
    width:60px;
    float:left;
    background-color:green;
    margin-top:10px;
    line-height:30px;
    border-radius:8px;
    margin-left:30px;
}

#paint-ok-button:hover {
    height:30px;
    width:60px;
    float:left;
    background-color: #00c600;
    margin-top:10px;
    line-height:30px;
    border-radius:8px;
    margin-left:30px;
}

.fire-test-button {
    width:240px;
    height:60px;
    line-height:normal;
    padding-top:15px;
}

.fire-test-button1 {
    width:200px;
    height:50px;
}

#bboss-logo {
    font-size:23px;
    position:absolute;
    width:200px;
    margin-right:-100px;
    right:50%;
}

#end-screen {
    position:absolute;
    width:100%;
    height:401px;
    top:95px;
    background-color:green;
}

#copy-confirm {
    position:absolute;
    height:40px;
    width:300px;
    background-color: rgb(195, 195, 195);
    color: #1439a7;
    border:1px solid #1439a7;
    margin-right:-150px;
    right:50%;
    top:200px;
    z-index:999;
    font-family: convergence,sans-serif;
    text-align:center;
    padding-top:20px;
    box-shadow:0px 0px 20px black;
}

#fire-test-window {
    height:300px;
    width:500px;
    position:absolute;
    margin-right:-250px;
    right:50%;
    top:100px;
    z-index:999;
    background-color: #bbd6fb;
    border-radius:8px;
    box-sizing: border-box;
    border: 1px solid #2854c0;
    box-shadow: inset 0 0 24px 10px rgba(151,191,252,1);
    overflow:hidden;
}

#block {
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    background-color:white;
    opacity:0.6;
    z-index:900;
}

#fire-test-instruction {
    position:absolute;
    width:450px;
    height:200px;
    top:30px;
    margin-right:-225px;
    right:50%;
    text-align:center;
    font-family: convergence,sans-serif;
    color: #3261cd;
}

#fire-test-right {
    position:absolute;
    height:30px;
    width:150px;
    box-sizing:border-box;
    top:100px;
    left:20px;

}

#fire-test-left {


}

#next-button {
    position:absolute;
    height:30px;
    width:200px;
    background-color:green;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    margin-right:-100px;
    right:50%;
    bottom:0px;
    cursor:pointer;
    line-height:30px;
}

.fireTestHeading {
    position: absolute;
    height: 35px;
    width: calc(100% - 20px);
    left: 10px;
    top: 10px;
    color: #3261cd;
}

.fireTestSizeContainer {
    position:absolute;
    width: calc(100% - 20px);
    height:35px;
    left: 10px;
    top:55px;
}

.fireTestSizeLeft {
    position: absolute;
    height: 29px;
    width: 200px;
    margin-right: 20px;
    right: 50%;
    text-align: center;
    font-size: 20px;
    color: #3261cd;
}

.fireTestSizeRight {
    position: absolute;
    height: 29px;
    width: 200px;
    margin-left: 20px;
    left: 50%;
    text-align: center;
    font-size: 20px;
    color: #3261cd;
}

.fireTestSizeXcontainer {
    position:absolute;
    height:36px;
    width:36px;
    margin-right:-18px;
    right:50%;
    color: #3261cd;
}

.fireTestHeading2 {
    position: absolute;
    height: 35px;
    width: calc(100% - 20px);
    left: 10px;
    top: 101px;
    color: #3261cd;
}

.fireTestOrientationContainer {
    position:absolute;
    width: calc(100% - 20px);
    height:50px;
    left: 10px;
    top:146px;
}

.fireTestOrientationContainerInner {
    position:absolute;
    height:100%;
    width:700px;
    margin-right:-350px;
    right:50%;

}

.fireTestOrientationButton {
    position:absolute;
    height:50px;
    width:200px;
    border-radius:8px;
    background-color:#2047a3;
    font-size:20px;
    font-family:convergence, sans-serif;
    line-height:50px;
    cursor:pointer;
}

.fireTestOrientationButtonSelected {
    position:absolute;
    height:50px;
    width:200px;
    border-radius:8px;
    background-color:green;
    font-size:20px;
    font-family:convergence, sans-serif;
    line-height:50px;
    cursor:pointer;
}

.fireTestHeading3 {
    position: absolute;
    height: 35px;
    width: calc(100% - 20px);
    left: 10px;
    top: 206px;
    color: #3261cd;
}

.fireTestCertNumberContainer {
    position:absolute;
    width: calc(100% - 20px);
    height:35px;
    left: 10px;
    top:251px;
}

.fireTestCertNumberInput {
    position: absolute;
    height: 29px;
    width: 300px;
    margin-left: -150px;
    left: 50%;
    text-align: center;
    font-size: 20px;
    color: #3261cd;
}

.fireTestHeading4 {
    position: absolute;
    height: 35px;
    width: calc(100% - 20px);
    left: 10px;
    top: 296px;
    color: #3261cd;
}

#endNextButton {
    position:absolute;
    height:30px;
    width:200px;
    background-color:green;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    margin-left:50px;
    left:50%;
    bottom:0px;
    cursor:pointer;
    line-height:30px;
}

#endSkipButton {
    position:absolute;
    height:30px;
    width:200px;
    background-color:#00A7DA;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    margin-left:50px;
    left:50%;
    bottom:0px;
    cursor:pointer;
    line-height:30px;
}

#endAddFireTestButton {
    position:absolute;
    height:30px;
    width:200px;
    background-color:orange;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    margin-right:50px;
    right:50%;
    bottom:0px;
    cursor:pointer;
    line-height:30px;
}

#fireTest2Orientation {
    position: absolute;
    width: 300px;
    height: 100%;
    margin-left: -150px;
    left: 50%;
    border-radius: 8px;
    background-color: green;
    line-height: 50px;
}

.palcoContainer {
    position:absolute;
    width:calc(100% - 20px);
    height:calc(50% - 15px);
    left:10px;
    top:10px;
    background-color:#FFD0D0;
    border-radius:8px;
    border:2px solid red;
    box-sizing:border-box;
    overflow:hidden;
}

.exitileContainer {
    position:absolute;
    width:calc(100% - 20px);
    height:calc(50% - 15px);
    left:10px;
    bottom:10px;
    background-color:#C9C6FF;
    border-radius:8px;
    border:2px solid #2216FF;
    box-sizing:border-box;
    overflow:hidden;
}

.palcoHeader {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0px;
    left: 0px;
    background-color: red;
    line-height: 30px;
}

.exitileHeader {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0px;
    left: 0px;
    background-color: #2216FF;
    line-height: 30px;
}

.codeContainer {
    position: absolute;
    width: calc(100% - 20px);
    height: 55px;
    top: 40px;
    left: 10px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid grey;
    box-sizing: border-box;
    color: grey;
    line-height: 55px;
    font-size: 27px;
}

.desContainer {
    position: absolute;
    width: calc(100% - 20px);
    height: 114px;
    top: 105px;
    left: 10px;
    background-color: white;
    border-radius: 8px;
    border:1px solid grey;
    box-sizing:border-box;
}
