@font-face{
  font-family: "Roboto-Regular";
  src: url("../public/Roboto-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Roboto-Bold";
  src: url("../public/Roboto-Bold.ttf") format("truetype");
}

body {
   padding                    : 0px;
   margin                     : 0px;
   font-family                : Roboto-Regular;
   font-size                  : 12pt;
   background-color           : #F3F4F6;
}

table {
   border-collapse            : collapse;
}

#leftmenu {
   background-color           : #262E44;
   min-height                 : 100%;
   width                      : 250px;
   position                   : absolute;
   left                       : 0px;
   top                        : 0px;
   color                      : #FFFFFF;
}

#topmenu {
   height                     : 30px;
   width                      : calc(100% - 255px);
   background-color           : #E8E8E8;
   position                   : absolute;
   left                       : 250px;
   top                        : 0px;   
   padding-left               : 5px;
   padding-top                : 10px;
}

#maincontent {
   min-height                 : 100px;
   width                      : calc(100% - 265px);
   position                   : absolute;
   left                       : 260px;
   top                        : 55px;
   background-color           : #FFFFFF;
}

#logintable {
   width                      : 900px;
   margin-left                : 20px;
   font-family                : Roboto-Regular;
   font-size                  : 15pt;
   border                     : 1px #252E43 solid;
}

.logininput {
   font-family                : Roboto-Regular;
   font-size                  : 15pt;
   height                     : 30px;
   width                      : 200px;
   border                     : 1px #000000 solid;
}

.LoginPageLink {
   font-family                : Roboto-Regular;
   font-size                  : 10pt;
   text-decoration            : none;
   color                      : #252E43;
}

#logindiv {
   width                      : 900px;
   height                     : 480px;
   position                   : absolute;
   left                       : 50%;
   top                        : 50%;
   margin-left                : -450px;
   margin-top                 : -280px;
} 

.tabbingtable {
   width                      : 90%;
   margin-top                 : 15px;
   margin-left                : 5px;
   margin-bottom              : 30px;
}

.tabbingtableth {
   border-left                : 2px #FFFFFF solid;
   border-bottom              : 2px #FFFFFF solid;
   border-right               : 2px #FFFFFF solid;
   border-top                 : 2px #FFFFFF solid;
   padding-top                : 3px;
   padding-bottom             : 3px;
}

.tabbingtablethselected {
   border-left                : 2px #FFFFFF solid;
   border-bottom              : 2px #359AB9 solid;
   border-right               : 2px #FFFFFF solid;
   border-top                 : 2px #359AB9 solid;
   padding-top                : 3px;
   padding-bottom             : 3px;
}

.tabbingtablelink {
   font-size                  : 12pt;
   color                      : #000000;
   text-decoration            : none;
}

.tabbingtablelinkselected {
   font-size                  : 12pt;
   color                      : #359AB9;
   text-decoration            : none;
}

.menubutton {
   font-size                  : 12pt;
   background-color           : #272E45;
   color                      : #FFFFFF;
   height                     : 30px;
   padding-left               : 5px;
}

.inputsubmit {
   border                     : 1px #000000 solid;
   padding-left               : 5px;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   color                      : #FFFFFF;
   height                     : 30px;
   background-color           : #252E43;
}

.inputtext { 
   border                     : 1px #000000 solid;
   padding-left               : 2px;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   height                     : 28px;
}

.inputselect { 
   border                     : 1px #000000 solid;
   padding-left               : 2px;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   height                     : 32px;
}

#StatusPopUpSuccess {
   width                      : 600px;
   text-align                 : center;
   font-family                : Roboto-Regular;
   font-size                  : 14pt;
   min-height                 : 40px;
   padding-top                : 20px;
   background-color           : #E1FFE1;
   border                     : 1px #000000 solid;
   box-shadow                 : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -webkit-box-shadow         : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -moz-box-shadow            : 2px 2px 5px 0px rgba(0,0,0,0.72);
   border-radius              : 0px 0px 10px 10px;
   position                   : fixed;
   top                        : 0px;
   left                       : 50%;
   margin-left                : -300px;
   -webkit-animation:signup-response 0.5s 1;
   animation:signup-response 0.5s 1;
   -webkit-animation-delay:2s; /* Safari and Chrome */
   animation-delay:3s;
   -webkit-animation-fill-mode: forwards;   
   animation-fill-mode: forwards;
}

#StatusPopUpFailed {
   width                      : 600px;
   text-align                 : center;
   font-family                : Roboto-Regular;
   font-size                  : 14pt;
   min-height                 : 40px;
   padding-top                : 20px;
   background-color           : #FFE8E1;
   border                     : 1px #000000 solid;
   box-shadow                 : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -webkit-box-shadow         : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -moz-box-shadow            : 2px 2px 5px 0px rgba(0,0,0,0.72);
   border-radius              : 0px 0px 10px 10px;
   position                   : fixed;
   top                        : 0px;
   left                       : 50%;
   margin-left                : -300px;
   -webkit-animation:signup-response 0.5s 1;
   animation:signup-response 0.5s 1;
   -webkit-animation-delay:2s; /* Safari and Chrome */
   animation-delay:3s;
   -webkit-animation-fill-mode: forwards;   
   animation-fill-mode: forwards;
}

.companydiv {
   width                      : 100%;
   border-top                 : 1px #FFFFFF solid;
   border-bottom              : 1px #FFFFFF solid;
   font-family                : Roboto-Bold;
   color                      : #FFFFFF;
   background-color           : #000000;
   height                     : 30px;
   text-align                 : center;
   padding-top                : 10px;
   font-size                  : 14pt;
   clear                      : both;
   margin-top                 : 15px;
   margin-bottom              : 15px;
}

.menuitem {
   height                     : 30px;
   width                      : 200px;
   padding-left               : 20px;
}

.menulink {
   color                      : #818B9D;
   font-size                  : 13pt;
   font-family                : Roboto-Regular;
   text-decoration            : none;
}

.actionbutton {
   height                     : 30px; 
   border                     : 0px;
   background-color           : #8ACCC8;
   border-radius              : 5px;
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   text-align                 : center;
   color                      : #FFFFFF;
   padding-left               : 5px;
   padding-right              : 5px;
}
   

@keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

.tablelistingtr:hover {
  background-color         : #EBEBEB;   
}



  .checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 25px;
  }

  @-moz-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @-webkit-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-webkit-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-moz-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  .checkbox-wrapper-19 input[type=checkbox] {
    display: none;
  }

  .checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #000;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
  }
  .checkbox-wrapper-19 .check-box::before,
  .checkbox-wrapper-19 .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: #34b93d;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    -webkit-transition: opacity ease 0.5;
    -moz-transition: opacity ease 0.5;
    transition: opacity ease 0.5;
  }
  .checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .05);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
  .checkbox-wrapper-19 .check-box.checked {
    border-color: #34b93d;
  }
  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
  .checkbox-wrapper-19 .check-box.checked::after {
    height: calc(var(--checkbox-height) / 2);
    -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    animation: dothabottomcheck-19 0.2s ease 0s forwards;
  }
  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
  .checkbox-wrapper-19 .check-box.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
    animation: dothatopcheck-19 0.4s ease 0s forwards;
  }
  


.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}   

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}


.drop-message {
    font-family       : Roboto-Regular;
    font-size         : 10pt;
    padding-top       : 40px;
}

#drop-region {
    background-color  : #fff;
    border-radius     : 20px;
    border            : 1px #FFFFFF solid;
    box-shadow        : 0 0 35px rgba(0,0,0,0.05);
    width             : 150px;
    height            : 150px;
    padding           : 5px;
    text-align        : center;
    transition        : .3s;
}

#drop-region:hover {
    box-shadow        : 0 0 45px rgba(0,0,0,0.1);
}
 
#image-preview {
    margin-top        : 20px;
}
#image-preview .image-view {
    display: inline-block;
    position:relative;
    margin-right: 13px;
    margin-bottom: 13px;
}
#image-preview .image-view img {
    max-width: 100px;
    max-height: 100px;
}
#image-preview .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
    background: rgba(255,255,255,0.5);
}