/*****************/
/*general styling*/
/*****************/
body {
    background: #555;
    /*animation: pulse 120s infinite ease-in-out;*/
    color: whitesmoke;
    padding: 0;
    margin: 0;
    font-family: Open Sans;
    font-weight: 300;
}

.mc-body{
    text-align:center;
}

div{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

/*0 to 500px height*/
@media screen and (max-height: 500px) {
    /*****************/ /*main content*/ /*****************/
     .main-content {
        box-shadow: 0px 0px 1vh rgba(242, 105, 37, 1);
        border-radius: 1vh;
    }

    .dialog-pass-input input{
        border-radius: .75vh;
    }
    
    .dialog-pass-wrapper svg{
        height:10vh;
        width:10vh;
    }
    
    /*****************/
    /*content header*/
    /*****************/
    .mc-header {
        padding: 1.5vh 3vh;
        font-size: 6vh;
        border-top-left-radius: 1vh;
        border-top-right-radius: 1vh;
    }

    .mc-header img {
        height: 8vh;
    }

    .mc-header > .mc-header-text {
        margin-left: 1vh;
    }

    /*****************/
    /*content body*/
    /*****************/
    .mc-body {
        /*padding: 1.5vh 3vh;*/
        /*font-size: 5vh;*/
        /*margin: 5vh;*/
    }
    .mc-body > img {
    	height:42vh;
	}

    /*****************/
    /*content input*/
    /*****************/
    .mc-input > div {
        padding: 1vh;
        margin: 10vh;
    }

    .mc-input-label {
        height: 10vh !important;
    }

    .mc-input-wrapper input, .mc-input-wrapper select, .mc-input-wrapper svg {
        padding: 1vh;
        border-radius: .5vh;
        border: .5vh solid transparent;
        font-size: 5vh;
        margin-right: 20vh;
    }

    .mc-input-wrapper input:hover, .mc-input-wrapper select:hover, .mc-input-wrapper input:active, .mc-input-wrapper select:active, .mc-input-password-wrap:hover input, .mc-input-password-wrap:hover svg {
        border: .5vh solid rgb(242, 105, 37);
    }

    .mc-input-password {
        height: 5vh;
    }

    .icon-wrapper-show-pass svg {
        height: 5vh;
        width: 5vh;
    }

    /*****************/
    /*content button*/
    /*****************/
    .mc-button-wrapper {
        font-size: 6vh;
        border-bottom-left-radius: .5vh;
        border-bottom-right-radius: .5vh;
    }

    .mc-button {
        margin: 1.5vh 3vh;
        padding: .75vh 1.5vh;
        border-radius: .5vh;
        border: 1px solid transparent;
        font-weight: bold;
    }

     /*****************/
    /*cbox*/
    /*****************/
    .cbox {
        height: 8vh;
        overflow:visible;
    }

    .cbox div {
        cursor: default;
    }

    .cbox-input, .cbox-button {
        min-height: 5vh;
        max-height: 5vh;
        border-color: transparent;
        border: .5vh solid transparent;
    }

    .cbox:hover .cbox-input,
    .cbox:hover .cbox-button{
        border: .5vh solid rgb(242, 105, 37);
    }

    .cbox-input {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
    }

    .cbox-input-open {
        border-bottom-left-radius: 0vh !important;
    }

    .cbox-button {                
        padding: 1vh 1.25vh;
        border-top-right-radius: .5vh;
        border-bottom-right-radius: .5vh;
    }

    .cbox-button-open {
        border-bottom-right-radius: 0vh;
    }

    .cbox-button:after {
        font-size: 5vh;
        line-height: 5vh;
    }

    	/*cbox drop box*/
    .cbox-drop-box {
        border-bottom-left-radius: 1vh;
        border-bottom-right-radius: 1vh;
        max-width: 36vh;
        /* max height instead of height allows for animation */
        max-height: 0px;
        box-shadow: 0.5vh 0.5vh 3vh #212121;
    }

    .cbox-drop-box-open {
        /* max height instead of height allows for animation */
        max-height: 30vh;
        /border-top: .5vh solid rgb(242, 105, 37);;
    }  

	.cbox-drop-box-item-wrapper{    
	  max-height:10vh;
	  /border-top:.1vh solid #333;
	  border-bottom:.2vh solid #333;  
	}

	.cbox-drop-box-item {
        padding: .3vh;          
        width: 76vh;
        max-width:76vh;
        font-size: 4vh;
	}
	
	.cbox-drop-box-item-remove{
	  /* max height instead of height allows for animation */
	  max-height:0px;
	  border:0;
	}

	.cbox-drop-box-item,
	.cbox-drop-box-item-button{
	  height: 5vh;
	  padding: 1vh;
	}

	.cbox-drop-box-item-button{    
	  width:5vh;
	  font-size: 2vh;  
	  line-height: 5vh;
	}  
}

/*500px to 1000px height*/
@media screen and (min-height: 500px) and (max-height: 1000px) {
    /*****************/ 
    /*main content*/ 
    /*****************/ 
    .main-content {
        box-shadow: 0px 0px .5vh rgba(242, 105, 37, 1);
        border-radius: .5vh;
    }

    .dialog-pass-input input{
        border-radius: .5vh;
    }        
    
    .dialog-pass-wrapper svg{
        height:5vh;
        width:5vh;
    }
    /*****************/
    /*content header*/
    /*****************/
    .mc-header {
        padding: 1.5vh 2vh;
        font-size: 3vh;
        border-top-left-radius: .5vh;
        border-top-right-radius: .5vh;
    }

    .mc-header img {
        height: 4vh;
    }

    .mc-header > .mc-header-text {
        margin-left: .5vh;
    }

    /*****************/
    /*content body*/
    /*****************/
    .mc-body {
        /*padding: 1.5vh;*/
        /*font-size: 2.5vh;*/
        /*margin: 1.5vh;*/
    }

    .mc-body > img {
    	height:22vh;
	}

    /*****************/
    /*content input*/
    /*****************/
    .mc-input > div {
        padding: 2.5vh;
        margin: 2.5vh;
    }

    .mc-input-label {
        height: 2.5vh !important;
    }

    .mc-input-wrapper input, .mc-input-wrapper select, .mc-input-wrapper svg {
        padding: .5vh;
        border-radius: .5vh;
        border: .2vh solid transparent;
        font-size: 2.5vh;
        margin-right: 10vh;
    }

    .mc-input-wrapper input:hover, .mc-input-wrapper select:hover, .mc-input-wrapper input:active, .mc-input-wrapper select:active, .mc-input-password-wrap:hover input, .mc-input-password-wrap:hover svg {
        border: .2vh solid rgb(242, 105, 37);
    }

    .mc-input-password {
        height: 3vh;
    }

    .icon-wrapper-show-pass svg {
        height: 3vh;
        width: 3vh;
    }

    /*****************/
    /*content button*/
    /*****************/
    .mc-button-wrapper {
        font-size: 2.5vh;
        border-bottom-left-radius: .5vh;
        border-bottom-right-radius: .5vh;
    }

    .mc-button {
        margin: 1.5vh 3vh;
        padding: .75vh 1.5vh;
        border-radius: .5vh;
        border: 1px solid transparent;
    }

     /*****************/
    /*cbox*/
    /*****************/
    .cbox {
        height: 4vh;
        overflow:visible;
    }

    .cbox div {
        cursor: default;
    }

    .cbox-input, .cbox-button {
        min-height: 3vh;
        max-height: 3vh;
        border-color: transparent;
        border: .2vh solid transparent;
    }

    .cbox:hover .cbox-input,
    .cbox:hover .cbox-button{
        border: .2vh solid rgb(242, 105, 37);
    }

    .cbox-input {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
    }

    .cbox-input-open {
        border-bottom-left-radius: 0vh !important;
    }

    .cbox-button {                
        padding: .5vh .75vh;
        border-top-right-radius: .5vh;
        border-bottom-right-radius: .5vh;
    }

    .cbox-button-open {
        border-bottom-right-radius: 0vh;
    }

    .cbox-button:after {
        font-size: 2vh;
        line-height: 3vh;
    }

   /*cbox drop box*/
    .cbox-drop-box {
        border-bottom-left-radius: .5vh;
        border-bottom-right-radius: .5vh;
        max-width: 26vh;
        /* max height instead of height allows for animation */
        max-height: 0px;
        box-shadow: 0.25vh 0.25vh 1.5vh #212121;
    }

    .cbox-drop-box-open {
        /* max height instead of height allows for animation */
        max-height: 20vh;
        /border-top: .2vh solid rgb(242, 105, 37);;
    }  

	.cbox-drop-box-item-wrapper{    
	  max-height:5vh;
	  /border-top:.1vh solid #333;
	  border-bottom:.1vh solid #333;  
	}

	.cbox-drop-box-item {
        padding: .3vh;          
        width: 37vh;
        max-width:37vh;
        font-size: 2vh;
	}
	.cbox-drop-box-item-remove{
	  /* max height instead of height allows for animation */
	  max-height:0px;
	  border:0;
	}

	.cbox-drop-box-item,
	.cbox-drop-box-item-button{
	  height: 2.5vh;
	  padding: 1vh;
	}

	.cbox-drop-box-item-button{    
	  width:3vh;
	  font-size: 1.5vh;  
	  line-height: 2.5vh;
	}

}

/*1000px + height*/
@media screen and (min-height: 1000px) {
    /*****************/
    /*main content*/
    /*****************/
    .main-content {
        box-shadow: 0px 0px .25vh rgba(242, 105, 37, 1);
        border-radius: .25vh;
    }

    .dialog-pass-input input{
        border-radius: .25vh;
    }
        
    .dialog-pass-wrapper svg{
        height:3vh;
        width:3vh;
    }
    /*****************/
    /*content header*/
    /*****************/
    .mc-header {
        padding: 1vh;
        font-size: 1.5vh;
        border-top-left-radius: .5vh;
        border-top-right-radius: .5vh;
    }

    .mc-header img {
        height: 3vh;
    }

    .mc-header > .mc-header-text {
        margin-left: .5vh;
    }

    /*****************/
    /*content body*/
    /*****************/
    .mc-body {
        /* padding: 1vh; */
        /*font-size: 1.5vh;*/
        /* margin: 1vh; */
    }

    .mc-body > img {
    	height:12vh;
	}

    /*****************/
    /*content input*/
    /*****************/
    .mc-input > div {
        padding: 1vh;
        margin: 1vh;
    }

    .mc-input-label {
        height: 1vh !important;
    }

    .mc-input-wrapper input, .mc-input-wrapper select, .mc-input-wrapper svg {
        padding: .25vh;
        border-radius: .25vh;
        border: .1vh solid transparent;
        font-size: 1.25vh;
        margin-right: 5vh;
    }

    .mc-input-wrapper input:hover, .mc-input-wrapper select:hover, .mc-input-wrapper input:active, .mc-input-wrapper select:active, .mc-input-password-wrap:hover input, .mc-input-password-wrap:hover svg {
        border: .1vh solid rgb(242, 105, 37);
    }

    .mc-input-password {
        height: 1.5vh;
    }

    .icon-wrapper-show-pass svg {
        height: 1.5vh;
        width: 1.5vh;
    }

    /*****************/
    /*content button*/
    /*****************/
    .mc-button-wrapper {
        font-size: 1.25vh;
        border-bottom-left-radius: .25vh;
        border-bottom-right-radius: .25vh;
    }

    .mc-button {
        margin: .75vh 1.5vh;
        padding: .5vh .75vh;
        border-radius: .25vh;
        border: .5px solid transparent;
    }

    /*****************/
    /*cbox*/
    /*****************/
    .cbox {
        height: 2vh;
        /font-size: 1.75vh;
        overflow:visible;
    }

    .cbox div {
        cursor: default;
    }

    .cbox-input, .cbox-button {
        min-height: 1.5vh;
        max-height: 1.5vh;
        border-color: transparent;
        border: .1vh solid transparent;
    }

    .cbox:hover .cbox-input,
    .cbox:hover .cbox-button{
        border: .1vh solid rgb(242, 105, 37);
    }

    .cbox-input {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
        width: 15vh;
        /font-size: 1.75vh;
    }

    .cbox-input-open {
        border-bottom-left-radius: 0vh !important;
    }

    .cbox-button {                
        padding: .25vh .5vh;
        border-top-right-radius: .25vh;
        border-bottom-right-radius: .25vh;
    }

    .cbox-button-open {
        border-bottom-right-radius: 0vh;
    }

    .cbox-button:after {
        font-size: 1vh;
        line-height: 1.5vh;
    }

     /*cbox drop box*/
    .cbox-drop-box {
        border-bottom-left-radius: .25vh;
        border-bottom-right-radius: .25vh;
        max-width: 13vh;
        /* max height instead of height allows for animation */
        max-height: 0px;
        box-shadow: 0.15vh 0.15vh 0.75vh #212121;
    }

    .cbox-drop-box-open {
        /* max height instead of height allows for animation */
        max-height: 10vh;
        /border-top: .1vh solid rgb(242, 105, 37);;
    }  

	.cbox-drop-box-item-wrapper{    
		max-height:2.5vh;
		/border-top:.1vh solid #333;
		border-bottom:.05vh solid #333;  
	}

	.cbox-drop-box-item {
        padding: .15vh;
        width: 18vh;
        max-width:18vh;
        font-size: 1vh;
     }

	.cbox-drop-box-item-remove{
	  /* max height instead of height allows for animation */
	  max-height:0px;
	  border:0;
	}

	.cbox-drop-box-item,
	.cbox-drop-box-item-button{
	  height: 1.25vh;
	  padding: .5vh;
	}

	.cbox-drop-box-item-button{    
	  width:1.5vh;
	  font-size: .75vh;  
	  line-height: 1.25vh;
	}
}

/*****************/
/*main*/
/*****************/
.header-wrapper, .icon-wrapper, .sub-menu-item .icon-wrapper, .sub-menu-item .icon-label, .icon-wrapper-show-pass {
    cursor: default;
}

.main-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
	background-position: center;
    background-repeat: no-repeat;
    /*background-size: contain;*/
}

/*****************/
/*main content*/
/*****************/
.main-content {
    position: absolute;
    height: initial !important;
    width: auto !important;
    background: #555;
    /* overflow: hidden; */    
    cursor: default;
    /* min-width: 120vh; */
}

/*****************/
/*content header*/
/*****************/
.mc-header {
    background: #323232;
    cursor: move;
}

.mc-header img, .mc-header > div {
    display: inline-block;
    vertical-align: middle;
}

/*****************/
/*content input*/
/*****************/
.mc-input-wrapper {
}

.mc-input {
    display: table-row;
    text-align: right;
}

.mc-input > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.mc-input-wrapper input, .mc-input-wrapper select, .cbox-drop-box {
    min-width: 100%;
    background: whitesmoke;
    color: #323232;
}

.mc-input-wrapper input:active, .mc-input-wrapper input:focus, .mc-input-wrapper select:active, .mc-input-wrapper select:focus {
    outline: none;
}

.mc-input-wrapper input:hover, .mc-input-wrapper select:hover, .mc-input-wrapper input:active, .mc-input-wrapper select:active {
    background: #323232;
    color: rgba(226, 224, 224, 0.8);
}

.mc-input-password-wrap:hover input, .mc-input-password-wrap:hover svg,
.cbox:hover .cbox-input, .cbox:hover .cbox-button {
    background: #323232;
    color: rgba(226, 224, 224, 0.8);
    fill: rgba(226, 224, 224, 0.8);
}

.mc-input-password-wrap {
    white-space: nowrap;
    /*remove the space between*/
    font-size: 0;
}

.mc-input .mc-input-password, 
.mc-input .cbox-input {
    min-width: 92%;
    max-width: 92%;
    margin-right: 0;
    padding-right: 0;
    border-right: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.mc-input .mc-input-password, .mc-input .icon-wrapper-show-pass {
    display: inline-block;
    vertical-align: top;
}

.mc-input .icon-wrapper-show-pass {
    overflow: hidden;
}

/*****************/
/*content button*/
/*****************/
.mc-button-wrapper {
    text-align: right;
    background: #444;
}

.mc-button {
    display: inline-block;
    background: rgba(226, 224, 224, 1);
    color: #323232;
}

.mc-button:hover, .cbox-button:hover, .cbox-drop-box-item-active {
    background: #323232;
    color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37);
}

.mc-button:active, .cbox-button:active {
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
}

/*show password*/
.icon-wrapper-show-pass svg, .cbox-button {
    background: whitesmoke;
    border-left: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    fill: #323232;
    color:#323232;
}

.icon-wrapper-show-pass svg:hover, .cbox-button:hover:after {
    fill: rgb(242, 105, 37);
    color: rgb(242, 105, 37);
}

.icon-wrapper-show-pass svg:active {
    fill: rgba(226, 224, 224, 0.8);
}

/*****************/
/*dialog password*/
/*****************/
.dialog-pass-wrapper{
    
}

.dialog-pass-wrapper > div{
    display:inline-block;
    vertical-align:middle;
}


.dialog-pass-wrapper .icon-wrapper{
	background:none !important;
}

.dialog-pass-wrapper svg{
    fill:#f26925 !important;
	color:#f26925 !important;
    background:none !important;
}

.dialog-pass-wrapper > div{
    margin-left: 1vh;
}

.dialog-pass-input input{
    background: whitesmoke;
    fill: #323232;
    color: #323232;
    border: .25vh solid transparent;
}

.dialog-pass-input input:active,
.dialog-pass-input input:focus{
    outline:none;
}

/*****************/
/*animation*/
/*****************/
.mc-input-wrapper input, .mc-input-wrapper select, .mc-button, .icon-wrapper-show-pass svg {
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

@keyframes pulse {
    0% {
        background-color: #666;
    }

    25% {
        background-color: #444;
    }

    50% {
        background-color: #222;
    }

    75% {
        background-color: #444;
    }

    100% {
        background-color: #666;
    }
}

@keyframes bgPosition {
    0% {
        background-position: 0% 51%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 51%
    }
}

/*****************/
/*cbox*/
/*****************/
/*general*/
.cbox {
    white-space: nowrap;
    text-align:left;
}

.cbox div {
    cursor: default;
}

/*combination*/
.cbox-input, .cbox-button {
    display: inline-block;
    vertical-align: top;    
}

/*cbox input*/
.cbox-input-open {
    border-bottom-left-radius: 0vh;
}

.cbox-button-open {
    border-bottom-right-radius: 0vh;
}

.cbox-button:after {
    content: "\25C0";    
    vertical-align: top;
}

.cbox-button-open:after {
    content: "\25BC";
}

/*cbox drop box*/
.cbox-drop-box{  
  position:relative;
  top:0;
  left:0;
  z-index: 1;
  overflow-x:hidden;
  overflow-y:scroll;    
}

/*cbox drop box item*/
.cbox-drop-box-item-wrapper{  
  overflow:hidden;  
  white-space:nowrap;
  /text-overflow:ellipsis;
}

.cbox-drop-box-item{  
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;   
}

.cbox-drop-box-item-remove{
  /* max height instead of height allows for animation */
  max-height:0px;
  border:0;
}

.cbox-drop-box-item,
.cbox-drop-box-item-button{
  display:inline-block;
  vertical-align:top;
  font-weight:400;
}

.cbox-drop-box-item-button-hover:active,
.cbox-drop-box-item-active{
  background:#333;
  color:#888;
}

.cbox-drop-box-item-hover,
.cbox-drop-box-item-button-hover{
  background:#888;
  color:#333;
}

.cbox-drop-box-item-button{  
  text-align:center;
  
}
.cbox-drop-box-item-button:after{
  content: "\2573"; 
}

/*cbox animation*/
.cbox,
.cbox-input,
.cbox-input-active,
.cbox-input-open,
.cbox-input-hover,
.cbox-button,
.cbox-button-active,
.cbox-button-open,
.cbox-button-hover,
.cbox-button:after,
.cbox-button-active:after,
.cbox-drop-box,
.cbox-drop-box-open,
.cbox-drop-box-item-button-hover,
.cbox-drop-box-item-button-hover:active{
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}

.cbox-drop-box-item,
.cbox-drop-box-item-active,
.cbox-drop-box-item-hover{
  -webkit-transition: all .15s ease;
  -moz-transition: all .15s ease;
  -ms-transition: all .15s ease;
  -o-transition: all .15s ease;
  transition: all .15s ease;
}

.cbox-drop-box-item-wrapper,
.cbox-drop-box-item-remove{
  -webkit-transition: all .35s linear;
  -moz-transition: all .35s linear;
  -ms-transition: all .35s linear;
  -o-transition: all .35s linear;
  transition: all .35s linear;
}