/*Footer*/
body{
   margin-bottom: 75px; /*footer height + 15px*/
   min-width: 768px;
    
   background: radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 65px 65px, linear-gradient(#efefef 5.2px, transparent 5.2px) 0 -2.6px, linear-gradient(90deg, #efefef 5.2px, #ffffff 5.2px) -2.6px 0;
   background-size: 130px 130px, 130px 130px, 65px 65px, 65px 65px;
}

footer{
    height:60px;
}

/*Styles for common tags*/
textarea{
    resize:none;
}
a {
    color:inherit;
}

a:hover{
    color:#555;
    font-weight:normal;
    text-decoration: none;
}

h2 {
    font-weight:normal;
    font-size:14pt;
    margin-bottom:15px;
}

h4 {
    font-size:20px;
}

h8 {
    font-weight:bold;
}

select {
    min-height:30px;
    padding:4px;
}

/* Bootstrap customs*/
.modal-lg{
    width:555px;
}
.navbar-expand-lg{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.6);
    height:100%;
    padding-left:290px;
    padding-top:9px;
}
.card {
    overflow:hidden;
}

.nav-item {
    height:inherit;
    overflow:hidden;
    color:black;
    font-size: 12pt;
}

.alert{
    margin-right:15px;
}

/*navbar plus workaround for (mobile) safari*/
.nav_active {
    background-color:white;
    border: 1px solid #888;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}
.nav-link {
    font-size:12pt;
}
nav {
    padding-left:70px;
    background-color: #aaa;
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.6);
}

.row_menu {
    width:100%;
    height:42px;
}

/*Content*/
#block_content{
    margin-top: 35px;
    margin-left: 130px;
}

/*rows on each page*/
.row_content {
    margin-top: 15px;
    margin-left:0px;
    margin-right:15px;
    max-width:640px;
}

/*titlecard speech bubbles on each page*/
.card_titlecard{
  position: relative;
  width: 640px;
  height: 116px;
  text-align: center;
  background-color: #fff;
  border: 8px solid #888;
  border-radius: 30px;
  box-shadow: 5px 5px 10px 2px #aaa;
  margin-bottom:50px;
}

.card_titlecard p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:12pt;
}

.card_titlecard:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 100px;
  border: 25px solid;
  border-color: #888 transparent transparent #888;
}

.card_titlecard:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 100px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

/*tags for each page*/

/*terms and conditions*/
.termsandconditions{
    max-width:640px;
}

/*tutorials*/

label.tutorial {
    font-weight:bold;
    font-size:14pt;
    margin-top:25px;
}

/*profile*/

#change_password_area{
    padding:15px;
}

/*index*/
#indexCarousel{
    width:240px;
}

.index_description{
    text-align: justify;
}

/*Lassify logo in text*/
.logo {
    font-family: 'Roboto', sans-serif;
    color: #888;
    font-size:inherit;
}
/*image comparison*/
* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 300px; /*should be the same height as the images*/;
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}

.img-comp-img img {
  display: block;
  vertical-align: middle;
}

.img-comp-slider {
  position: absolute;
  z-index: 9;
  /*set the appearance of the slider:*/
  width: 0;
  height: 105%;
  background-color: rgba(255,255,255,0.9);
  padding-top: 5%;
  
}

.img-comp-slider p {
  position:relative;
  opacity:0.5;
  right:12px;  
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align:center;
  font-weight: bold;
  font-size:10pt;
}

.img-comp-slider:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #fff;
    transform: translate(-50%);
}

.card_slider{
    margin-left:7px;
    margin-right:auto;
    width:768px;
    border: 1px solid white;
    border-radius: 12px 12px 12px 12px;
}

.card_terminal{
    height:224px;
    width:350px;
    background-color: rgba(255,255,255,1);
    border: 1px solid grey;
    border-radius: 12px 12px 12px 12px;
    object-fit:contain;
    overflow:hidden;
    pointer-events: none;
}

.card_image{
    height:224px;
    background-color: rgba(255,255,255,1);
    border: 1px solid grey;
    border-radius: 12px 12px 12px 12px;
    object-fit:contain;
    overflow:hidden;
}

.card_index{
    height:100%;
    width: 100%;
    padding-left:15px;
    padding-top:15px;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid grey;
    border-radius: 12px 12px 12px 12px;
    margin-left:auto;
    margin-right:auto;
    font-size:11pt;
}

.row_index {
    width:833px;
    padding-left: 50px;
    height:240px;
}

.row_slider {
    width:833px;
    padding-left: 50px;
    height:300px;
}

/*classifiers page*/
/*classifiers page - uploader*/
#success_label{
    font-size:10pt;
}

.qq-upload-button-selector {
    background-color: white !important;
    
}
.qq-upload-size {
    padding-left: 2px;
    color:grey !important;
}
.qq-progress-bar {
    background-color: black !important;
    text-align:left;
    color:white;
    width:100%;
    min-height: 12px;
    padding-left: 6px;
    border-radius: 2px !important;
}

.qq-upload-button-selector{
    font-weight:bold;
    border-width: 1px;
    border-color:black;
}

.qq-upload-button-selector:hover{
    background-color: grey !important;
    color: white;
}
.qq-upload-file{
    height:20px;
}

.form_modal_alert{
   margin-top:12px;
   text-align:center;
   display: block;
   margin-left: auto;
   margin-right: auto; 
}

/*classifiers page - project cards*/
/*classifiers page - project cards - general*/
.card_project{
    border: 1px solid #888;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 5px 5px 10px 2px #aaa;
    height:100%;
}

.img_project {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #aaa;
    background-repeat: no-repeat;
    background-size: 255px;
    background-position: center top;
    height: 255px;
}

.img_idle {
    background-image:url("/images/project_idle.png");
}

.img_processing {
    background-image:url("/images/project_processing.png");
}

.img_classifiercreation {
    background-image:url("/images/project_classifiercreation.png");
}

.img_finished {
    background-image:url("/images/project_finished.png");
}

/*classifiers page - project cards - title*/
.card_title{
    z-index:100;
    font-size: 16pt;
    color: black;
    margin-left: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:11rem;
}

.area_titlebackground{
    width:100%;
    height:40px;
    padding-top:6px;
    z-index:10;
    background-image:url("/images/project_title.png");
    border-bottom: 1px solid grey;
    }

/*classifiers page - project cards - remove button*/
.area_remove{
    z-index:100;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;
}

.btn_removeproject{
    width:50px;
    height:39px;
    justify-content:center;
    border-radius: 0px;
    font-size:14pt;
}

/*classifiers page - project cards - label in each project*/
.label_project{
    font-size:9pt;
    font:grey;
    text-align:center;
}

/*classifiers page - project cards - classifier name dropdown menu*/
.classifier_name{
    font-weight:bold;
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:13rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ddd;
}
/*classifiers page - filelist*/
.th_filelist{
    text-align:center;
}

.upload_path{
    width:180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-size:8pt;
    margin-left:8px;
}
.file_status{
    font-size:8pt;
}

/*classifiers page - project cards - project buttons*/
.btns_project{
    text-align:center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 10px;
}

.uploadButton, .filelistButton{
    width:45%;
    font-size:14pt;
}

/*classifiers page - project cards - custom purple color for projects which are used to create a classifier*/
p.text_classifiercreation{
    padding-left:12px;
}
.btn_classifiercreation{
    background-color: #57599d;
    color: white;
}
.btn_classifiercreation:hover{
    background-color: #3a3b68;
    color: white;
}

/*classifiercreation page*/
.table_classifiers {
    width:100%;
    overflow:hidden;
    margin-bottom:15px;
    padding-bottom:0;
}
.table_classifiers table{
    margin-bottom:0;
}
.table_classifiers thead{
    background-color:#aaa;
    font-size:12pt;
}
.table_classifiers td{
    background-color:#EEE;
    font-weight:bold;
}
/*classifiers page preview modal*/

/*login page*/

.btn_login{
    width:100%;
}

/*admin page*/
meter{
    width:100%;
    height:100%;  
}