/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 320px) {
  .container {
    width: 100%;
    padding: 0; }
}

/* For devices larger than 770px */
@media (min-width: 770px) {
  .container {
    max-width: 98%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
  
}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; height: 100%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Heebo', sans-serif;
  color: #f2f2f2;
  background: #191919;	
  height: 100%;
  overflow-x: hidden;
   }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 100;
  text-transform: uppercase; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 2.5rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0  2px 0 0; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #ffffff;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }

.submit-normal {border: 1px solid #ffffff;}
.submit-good {border: 1px solid #5abf41;}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #4d4d4d;
  border: 1px solid #5d5d5d;
  /*border-radius: 4px;*/
  box-shadow: none;
  box-sizing: border-box;
  color: #fff;
  width: 100%; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #5ABF41;
  outline: 0; }
label,
legend {
  display: block;
  margin: 1rem 0 0 0;
  /*font-weight: 600*/;
 }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  min-width: 60px; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; 
  }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  text-align: left;
  /* border-bottom: 1px solid #E1E1E1; */ }
th:first-child,
td:first-child {
  padding-left: 0; }
/* th:last-child,
td:last-child {
  padding-right: 0; } */


.cloud-data-table {
	border: 1px solid #141212;
	width: 100%; 
	margin: 0;
	font-size: 10px;
}
.cloud-data-table select {width: 50%;}
.cloud-data-table td {padding: 3px 3px 3px 18px;}
.cloud-data-table th {padding: 18px;}
.cloud-data-table th, .cloud-data-table td  {border: 1px solid #141212;}
.cloud-data-table tr:nth-child(even) {}
.cloud-data-table tr:nth-child(odd) {background-color:  #221f1f;}
.cloud-data-table tr:hover {background-color: rgba(255,255,255,0.1); -webkit-transition: 0.5s; transition: 0.5s; }
.pagination {
  display: inline;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
 margin:  50px 50px 50px 250px;
}
.pagination li {
    list-style: none;
    padding: 0;
    float: left;
}
.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.page-link {
	float: left;
	color: #fff !important;
	font-size: 10px;
	line-height: 24px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	min-width: 14px;
	padding: 0 7px;
	margin: 0 5px 0 0;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	text-decoration: underline;

}
.page-item #ellipsis .page-link  {
    
   background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
    text-decoration: none ;
    
}
.page-item.disabled .page-link  {
    
	background: #666 !important;
    cursor: default !important;
 	text-decoration: none ;
}

.page-item.active .page-link{
    background: #666 !important;
    cursor: default !important;
     text-decoration: none ;
}
.page-link:focus, .page-link:hover {
 color: #1EAEDB;
  text-decoration: none;
  border-color: #ddd;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}



/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; 
  margin: auto;}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }
.u-vertical-align {
	position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
}  
@media only screen and (max-width: 600px)  {
 .hide-on-mobile {display: none;}
 .show-on-mobile {display: block}
}

@media only screen and (min-width: 600px) {
 
 .show-on-mobile {display: none;}
 
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }
 /* NAVIGATION */
 .menu-burger {
            display: block;
            height: 60px;
            color: #000;
            background-image: url(../icons/hdanywhere-logo-horiz.svg), url(../icons/menu.svg);
            background-color: #000;
            background-repeat: no-repeat;
            background-position: center, right;
            background-size: 240px, 40px;
			cursor: pointer;
        }
			.menu-burger:hover {cursor: pointer;}
            .sub-menu img {
                width: 45%;
            }
        #side {
            display: none;
        }
        #side ul {
            list-style-type: none;
            display: block;
            width: 65%;
            margin: 20px auto 0 auto;
        }
        #side ul li {
            line-height: 30px;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: 0.2em;
            font-size: 1.1rem;
        }
        #side ul li a {
            display: block;
            text-decoration: none;
            color: #999999;
            padding: 10px 0;
            border: 1px solid #999999;
        }
        #side ul li a:hover {
            color: #fff;
            border: 1px solid #fff;
        }

    /* SAVE PAGE */

        #sticky {
            display: none;
		}

    /* DASH INTERFACE ITEMS */

        .inline-ui {
            float: left;
            margin: 15px 0 27px 0;
            width: 100%;
            list-style-type: none;
        }

        .standard-ui-list,
        .standard-ui-save {
            list-style-type: none;
        }
        .radio-label {
            display: inline-block;
            line-height: 38px;
            font-weight: bold;
        }

        .main .standard-ui-save li,
        .sub-menu .standard-ui-save li,
        .sub-menu .standard-ui-save li button,
        .main .standard-ui-save li button {
            width: 100%;
        }
		.notification {
			text-align: center;
		}
		.good {
			background-color: #5ABF41;
		}
		.bad {
			background-color: #B31F21;
		}
		.normal {
			background-color: #77c8db;
		}
/* Animation
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* ALL RESOLUTIONS */


.user-choice-page h1 {margin: 25px 0;}

.inline-ui {
float: left; margin: 15px 0 27px 0; width: 100%; list-style-type: none;	}


.standard-ui-list,
.standard-ui-save {list-style-type: none;}

.user-heading h2 {font-size: 2.5em; letter-spacing: 0.2em;}

.radio-label { display: inline-block;
    line-height: 38px; font-weight: bold;}

.main .standard-ui-save li, 
.sub-menu .standard-ui-save li,
.sub-menu .standard-ui-save li button, 
.main .standard-ui-save li button {width: 100%;}

.breadcrumb {padding: 20px 0; border-bottom: 1px solid #141212; border-top: 1px solid #141212;}
.breadcrumb ul {margin: 0; padding: 0;}
.breadcrumb ul li {display: inline; margin-right: 20px;}
.breadcrumb ul li:before {content: "\00BB \0020";}

.barcode {font-size: 1.5rem; padding: 10px; clear:both;}
.barcode-container {margin: 0 0 10px 0; padding: 15px; background-color: #ffffff; float: left;  width: 100%;}
.barcode-container svg {width: 100%;}

.sub-navigation-container {margin: 50px 0; border-bottom: 1px solid #999999; padding-top: 25px; padding-bottom: 25px;}

.ticket {margin-bottom: 20px; font-size: 1.2rem; margin-top: 15px; float: left; width: 100%;}
.ticket-posted-by ul, 
.ticket-message ul {list-style-type: none; padding: 0; margin: 15px;}
.ticket-posted-by li {margin-bottom: 0; line-height: 1.4rem;} 

.ticket-heading {margin: 25px 0; font-size: 2rem;}
.ticket-posted-by {float: left; width: 20%;}
.ticket-message {float: right; width: 79%; background-color: #221f1f;}
.ticket-message-container {margin: 7px 0;}



/* Small mobile devices */
@media (min-width: 320px) {


.inline-ui {margin-left: 0%; width: 100%; }


.hda-login-footer {bottom: 0; left: 0; width: 100%; background-color: #1E1E1E; text-align: center; font-size: 14px; padding: 5px;}	
	
.logo h1 {font-size: 7rem; margin: 0; padding: 20% 0 0; text-align:center; display: none;}
h2 {}
.info {display: none;}
.hdanywhere-logo {background:#111; margin:auto; width: 100%; }
.hdanywhere-logo img {width:240px;}
.page-title {background-color: #1a1a1a;}
.page-title h2 {font-size: 2.2rem; padding: 20px 0; margin:0; text-transform: uppercase; color: #999999; text-align: center;}

.sub-menu {background: #111111;}
.sub-menu img {width: 40%; margin: 20px 30%; float: left;}
.sub-menu h3 {font-size: 2.5rem; text-transform: uppercase; margin-top: 15px; width: 100%; text-align: center; display: block;}
.sub-menu p {font-size: 1.2rem; color: #999999; width: 90%; text-align: center; padding: 0 5%; }




.input-status {display: none;}


		/* label,legend {font-size: 1.2rem} */

	
		.info ul {list-style-type: none;}
		

	
	.main .standard-ui-list {width: 90%; margin: 15px 5%; float: left;}
	
	
	.main .standard-ui-save, 
	 .sub-menu .standard-ui-save {float: left; width: 80%; margin: 30px 10%;}


	 
.main .standard-ui-save li, 
.sub-menu .standard-ui-save li,
.sub-menu .standard-ui-save li button, 
.main .standard-ui-save li button {width: auto;}





	.ui-status-label {padding: 0 10px; float: right; height: 36px; line-height: 36px;}
	.notification {
		text-align: center;
	}
.good {background-color: #5ABF41; border: 1px solid #19661F;}
.bad {background-color: #B31F21; border: 1px solid #78181A;}
.normal {background: none; border: 1px solid #cecece;}

	
	
	
	
	}

/* Larger than phablet (also point when grid becomes active) 
@media (min-width: 550px) {}*/
	
	
	



/* Larger than tablet - NORMAL DESKTOP VIEW  */ 
@media (min-width: 750px) {

	
	
.hda-login {min-height: 289px; height: 289px;}	
.hda-login-footer {bottom: 0; left: 0; width: 100%; background-color: #1E1E1E; text-align: center; font-size: 10px; padding: 5px;}	
.hda-logo {width: 33px; height: auto; position: absolute; left: 0; top: 0; line-height: 0;}
	.hdanywhere-logo {position:absolute; z-index: 1;}
	.logo {}
.logo h1 {font-size: 9.355rem; padding: 60px 0px 15px 15px; text-align: center; display: block;}
.info {display: block;}
.info ul {list-style-type: none; font-size: 1rem; line-height: 0.8; margin: 25px 0 0 0; text-align: right;}
.ctrl-info {min-width: 20%;}
.ctrl-result { padding-right: 15px;}
.page-title {background-color: #1a1a1a;}
.page-title h2 {font-size: 4.2rem; padding: 50px 0 50px 20px; margin:0; text-transform: uppercase; color: #999999; letter-spacing: 0.3em; text-align: left;}
.sub-menu, .main {margin-top: 25px;}
.sub-menu {padding-left: 15px; background-color: transparent;}
.user-heading h2 {font-size: 5em; text-align: left; font-weight: 300; letter-spacing: 0.3em; color: #000000; }

.main {padding-right: 15px;}
.main .standard-ui-list,
.main .standard-ui-save,
.sub-menu .standard-ui-save {margin: 30px 0; width: 100%;}
.main .standard-ui-save li {margin-left: 30%;}

.main .standard-ui-list {width: 100%; float: none; margin: 0;}



.sub-menu img {width: 25%; margin: 0; float: none;}
.sub-menu h3 {text-align: left;}
.sub-menu p {text-align: left; width: 100%; padding: 0;}



label,
legend {  float: left;  width: 30%;  }


	input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  width: 60%; }



.inline-ui {margin-left: 30%; width: 60%; }

.input-status {width: 5%; display: block;   text-transform: uppercase; text-align: center; font-weight: bold; font-size: 0.8rem;}
.ui-status-label {padding: 0 10px; float: right; height: 36px; line-height: 36px;  }
.notification {
		text-align: center;
	}
.good {background-color: #5ABF41; border: 1px solid #19661F;}
.bad {background-color: #B31F21; border: 1px solid #78181A;}
.normal {background: none; border: 1px solid #cecece;}


/*NAVIGATION*/
        html,
        body {
            width: 100%;
            height: 100%;
            /*padding: 0;
            margin: 0;
            overflow-x: hidden;*/
        }
        

	}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


.custom_span
{
margin-left:250px!important;
color:red!important;
}

/* #modal_loading  {
display: none;
	position:absolute;
	top:50%;
	left:50%;
	width: 30px;
	height: 30px;
	border: 8px solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	box-shadow: 0 0 25px 2px #eee;

} */
#fade_element{
display: none;
background: none repeat scroll 0 0 black;
position: fixed;

opacity: 0.5;
z-index: 1000001; 
left: 0;
top: 0;
height: 100%;
width: 100%;
}

.center {text-align:center;}



   .logo {display: block;}
    .logo h1, .page-title h2, .boot-title {text-align: center;}

label, legend {text-align: left;}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    width: 70%;
}

@media (min-width: 320px) {
    .logo {display: block;}
    label, legend {width: 100%; text-align: left;}
	
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    width: 100%;
    }
}


/* App Home */

.user-choice-page {}
.cloud-logo {max-width:140px; margin:auto;}
.dark-bg {background-color: #1a1a1a;}
.choice-icon-register {padding:20px; background:#4D4D4D; border: 5px solid #332c2c;}
.choice-icon-home {padding:20px; background:#DA7676; border: 5px solid #332c2c;}
.choice-icon-inst {padding:20px; background:#76da7b; margin-left:20px; border: 5px solid #332c2c;}
.choice-icon-home-add {padding:20px; background:#555; border: 5px solid #332c2c;}
.choice-icon-home-login {padding:20px; background:#DA7676; margin-left:20px; border: 5px solid #332c2c;}
.choice-icon-inst-add {padding:20px; background:#555; border: 5px solid #332c2c;}
.choice-icon-inst-login {padding:20px; background:#76da7b; margin-left:20px; border: 5px solid #332c2c;}
.choice-icon-register:hover, .choice-icon-register:focus {border: 5px solid #fff; cursor:pointer; transition: all 0.5s ease;}
.icon-row {padding:20px 0 40px;}
.icon-row .fa {font-size:8em;}
.user-heading {padding-top:20px; margin-top: 40px;}
.user-heading-login {padding-top:10px; padding-bottom:10px; margin-top: 40px; font-size:20px; background:#141414;}
.user-choice-page .logo h1 {/*font-size: 4rem;*/}
.user-choice-box {position:relative; margin:auto; float: left; width:50%;}
.user-choice-box-label {position:relative;}

@media (min-width:768px) and (max-width:1180px) { 
 	.icon-row .offset-by-four.column, .icon-row .offset-by-four.columns {margin-left: 25%;}
	.icon-row .four.columns {width: 50%;}	
}

@media (max-width: 1180px) {
	.user-choice-box {width:50%;}
}

@media (max-width: 768px) {
	.user-choice-box {width:50%;}
}

@media (max-width: 380px) {
	.choice-icon-inst {margin-left:0px;}
	.user-choice-box {width:100%;}
}