@font-face { 
    font-family: scriptfont;
    src: url("/fonts/ArchitectsDaughter.ttf");
}


html {
    font-size: .8vw;
    overflow: hidden;
}

body {
    padding: 0px;
    margin: 0px;
    background-color: white;  
    font-family: Arial, Helvetica, sans-serif; 
    background-image:url("/images/desk.jpg");  
    background-size: 100% 100%; 
}


.dialog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;  
   	display: none;
	pointer-events: none;
}

.dialog > div {
	position: relative;
    margin: 35vh auto;
    width:13vw;
    text-align: center;
	padding: .5em;
	border-radius: .5rem;
	background: white;
    border: solid black .125em;
 }

.typedialog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;  
   	display: none;
	pointer-events: none;
}

.typedialog > div {
	position: relative;
    margin: 20vh auto;
    width:20vw;
        
    height:  20vh;  
    text-align: center;
	padding: .5em;
	border-radius: .5rem;
	background: white;
    border: solid black .125em;
 }
  
 
.logindialog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;  
   	display: none;
    background: rgba(0,0,0,0.8);

	pointer-events: none;
}

.logindialog > div {
	position: relative;
    margin: 35vh auto;
    width:20vw;
    text-align: center;
	padding: .5em;
	border-radius: .5rem;
	background: white;
    border: solid black .125em;
 }

.popupDisplay {
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   	display: none;
	pointer-events: none;    
}

.popupDisplay > div {
    position: relative;
    margin: 25vh auto;
    width:30vw;
	padding: 1rem;
	border-radius: .5rem;
	background: white;
    border: solid black .125rem;
 } 
  
.dialogtitle {

    font-size: 1rem;
}

.dialogmessage {
    text-align: center;
    font-size: 1rem;
}

.itemrow, .outfititemrow, .eventitemrow, .reporttitemrow, .eventoutfititemrow, #evlefttableheader, .outfititemlist {
    
        cursor:pointer;
         
}

.itemrow:hover, .outfititemrow:hover, .eventitemrow:hover, .reporttitemrow:hover, .eventoutfititemrow:hover, #evlefttableheader:hover, .outfititemlist:hover { 

    background: #00d9ff; 
    
}

.poster:hover {

    opacity: .4;
    
}

#tableheader, #righttableheader {
    width:  30rem;
    margin:  0 auto;

    background-size: 100% 100%;
        background-repeat: no-repeat;
}

.popupEventDisplay {
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   	display: none;
	pointer-events: none;    
}
.popupEventDisplay > div {

    position: relative;
    margin: 25vh 20vw;
    width:20vw;
    
	padding: 1rem;
	border-radius: .5rem;
	background: white;
    border: solid black .125rem;
    
}
.popupSettingsDisplay {
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   	display: none;
	pointer-events: none;    
}
.popupSettingsDisplay > div {

    position: relative;
    margin: 15vh 40vw;
    width:25vw;
    
	padding: 1rem;
	border-radius: .5rem;
	background: white;
    border: solid black .125rem;
    
} 
 
 
.itemrow {
    font-family: scriptfont; 
    padding: .2rem;
    height: 1.2rem;
    margin: 0;
    font-size: 1rem; 
}


#reportlist {
    
    margin-left: 0vw;    
    
}



#typestable {
    
    margin-top: .25rem ;
    margin-left: 2rem;
    height:  78%; 

    -ms-overflow-style: none; 
    overflow-y: auto;

}
#displayTypes {
    
      height:  40%;  
    
    
}

#editTypes {
    
height:  100%;     
    
}


#typefldset {
    
       height:  90%;    
}

.reporttitemrow {

    margin-left: 1.5vw;
}
 .outfitlists {
        font-weight: bold;
    font-size: 2rem;
    margin: 0 0% 0 14%;

}
.outfitlist {
    font-weight: bold;
    font-size: 2rem;
    margin: .25% 1% 0 0%;

}



.outfitrow  {
    height:2rem;
    font-family: scriptfont;


  font-size: 1.2rem;
    font-weight: bold ;

}

 .outfititemrow {
    font-family: scriptfont; 
    height: 2rem;
    margin: 0% 0 0 0%;
    font-size: 1rem;

    
}

.eventitemrow {
    font-family: scriptfont; 
    font-weight: bold;   
    font-size: 1.2rem;  
       margin: 20%; 
}

.outfitrow:hover, .eventlists:hover {
        cursor:pointer;
    background-color: lightblue;
    
}


.eventlists {
    font-family: scriptfont;
    margin-left:10%;
    text-align: left;
    font-weight: bold;
    font-size: 1.4rem;

}


.eventoutfititemrow {
     font-family: scriptfont;

    text-align: left;

    font-size: 1rem;
    margin-left:1%
    
    
}

.outfitrowdiv{

    padding: 0%;
    margin: 0% 1% 0% 19%;
    width: 100%;

}   
 
.eventrowdiv {

    padding: 0%;
    margin: 1% 12%;
    width: 100%;

}       

.controls {text-align: center; }

#totaldisplay {
    height:100vh;
    width:100vw;    
    padding: 0;
}
#header {
    width:90%;
    height:7%;
    padding-top:2rem;
    background-image: url("/images/silver.jpg"); 
    background-size: 100% 100%;
    border-style: solid;
    border-color: black ;
    margin: 1rem auto;
    border-width: .125rem;
    cursor: pointer;
}

.header-text {

    text-align: center;
    color:silver;
    font-size:1.5rem;

    text-shadow: 2px -2px 0px black;
}

.singleheader, .doubleheader {
    padding-top: .5rem;
    width:100%;
    height: 4%;
    margin:0px;
    text-align: center;
    text-decoration: underline;
    font-size: 1.5rem;
    font-weight: bold;
    
      font-family: scriptfont;
}

#evlefttableheader, #justevent {
    padding-top: .5rem;
    width:70%;
    height: 4%;
    margin:0 auto;
    text-align: center;
    text-decoration: underline;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: move;
      font-family: scriptfont;   

}

#openTypeUpdate {
    
    margin-left: 19%;
    
}

.typetd {

    border-width: .1rem;
    border-color: lightgrey; 
    border-style: solid;
    cursor: pointer;
}

.typetd:hover {
    
    background-color: lightblue;    
}

.listheader {

    text-align: center;
    color:silver;
    font-size:1.5rem;

    text-shadow: 2px -2px 0px black;    
    
    
}
.outfitdialog, .eventdropdown, .settingdialog, .customdialog {
    
    float:right;
    
}

.dropdown {
        margin: 1rem auto;

    font-size: 1rem;
   width: 10rem; 
   display:none; 

    
}
.plusbutton {
    
    font-family:Arial, Helvetica, sans-serif;
    display: block;

    float:right;
    top: 0;
 
    height: 4rem;
    width: 4rem;
    margin: 0%;
    background-image: url("/images/pin.png");
    background-repeat: no-repeat; 
    background-size: contain;    
    
}

#binoutfititem, #binitem, #binoutfit, #bineventoutfit, #binevent, #binreport {
    position: absolute;
    top:  78%;
    left: 5%;

    height: 10%;
    width: 5%;
    display:none;
    background-image: url("/images/bin.png"); 
    background-size: contain;       
}

#bintype {
    position: fixed;
    top:  53%;
    left: 42%;

    height: 5%;
    width: 2.5%;
    display: none;
    background-image: url("/images/bin1.png"); 
    background-size: contain;       
}

#addtype {
    
    position: absolute;
    top:  10%;
    left: 85%;

    height: 18%;
    width: 9%;
     cursor:pointer;
    background-image: url("/images/plus.png");
     background-size: contain;   
   background-repeat: no-repeat;     
    
}

#logout {
    position: absolute;
    top:  90%;
    left: 1%;

    height: 7%;
    width: 7%;
     cursor:pointer;
    background-image: url("/images/logout.png");
     background-size: contain;   
   background-repeat: no-repeat;     
}

#settings {
    position: absolute;
    top:  89%;
    left: 6%;

    height: 7%;
    width: 7%;
     cursor:pointer;
    background-image: url("/images/settings.png");
     background-size: contain;   
   background-repeat: no-repeat;     
}

#custom {
    position: absolute;
    top:  89%;
    left: 10%;

    height: 7%;
    width: 7%;
     cursor:pointer;
    background-image: url("/images/custom.png");
     background-size: contain;   
   background-repeat: no-repeat;     
}
#openSettings {
    
    width: 50%;

}

.settingsmsg {
    margin:  1rem auto;
    
    display: none;
    text-align: center;

    
}

#puser, #cuser {
    
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    
}

#navbar {
    background-image: url("/images/velvet.jpg"); 
    background-size: 100% 100%;   
    background-color: blue;
    text-align: right ;
    height:100%;
    width:15%;
    float:left;
    margin:0 0 0 .1% ; 
    border-style: solid;
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-right-color: black ;
 

    border-right-width: .1rem; 

}



#output {
    display:block;

    text-align: left ;
    height:98%;
    width: 84%;
    float:left;
    margin:0px; 
    padding-top:1% ;

  
}

#outfittitle {
 
 width: 16rem;   
}


#singleoutput {
     background: 
    url("/images/notebook.png")  35% 0% / 65% 30% repeat-y;   
   height:99%;
   width: 100%;
   
   
    
}

fieldset {  
    border:  .0625rem solid; 
    margin: .5rem; 
    text-align: left;      
}  

.flddiv {

    padding: .25rem;
    margin: .5rem 0rem;
    display:block;    
}

fieldset p {
display: none;    
}

legend {
    font-size: 1.25rem;
    text-align: left;
    font-weight: bold;
}

.itemimagediv {
    height: 7rem;
    width: 7rem;  
    margin: .2rem;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: .8rem; 
    float:left;
    border-style: double;    
    border-color: black;
    border-image-width: .1rem;
    background-color: white;
}

.poster {
    height: 5.7rem;
    width: 7rem; 
    
    
    
}
.divlistsright {

    text-align: center;
    margin-top:  -1.3rem;

    margin-left: 12%;
    margin-right: 10%;

} 

.divlistssingle {

    text-align: center;
    margin-top:  -1.3rem;

    margin-left: 24%;
    margin-right: 20%;
 
} 
.tablelists {

    text-align: left;
    margin:  -1.3rem auto;

    padding-right: .5rem;

} 
#itemsfieldset, #outfieldset, #eventfieldset, #reportfieldset {
    font-size: 1.2rem;
    width: 85%;
    text-align: center;
    height: 3%;
    border: solid black .125rem;
    padding:.5rem;
    margin: 0 auto;
    background-image: url("/images/silver.jpg"); 
    background-size: 100% 100%;
    cursor:pointer;
}

#slidenavbar {
    font-family:Arial, Helvetica, sans-serif;
    display: block;
    float:left;
    font-size: 1.2rem;
    text-align: center;
    height: 1.5rem;
    width: 3.4rem;
    margin-left: 1%;
    padding:0px;
    background-image: url("/images/silver.jpg"); 
    background-size: contain;
    cursor:pointer;

}



#itemoutfitmenuheader, #eventoutfitmenuheader {
    
    display: none;
}




.tname, .tdesc, .ttype  {
    padding-top: .75rem;
    margin-left:  0rem;

    display:inline-block;
    text-align: left;

    font-size: 1.2rem;
    font-weight: bold;
    
}

.tname {
    
    margin-left: 1rem;
}


#reportleftcolheader {
    font-family: scriptfont;
    width:100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 auto;
    height: 4%;    
  
    
    
}

#reportoptions, #archiveoptions {
    position:fixed;
    right: 5rem;
    top:2rem;
    width:10rem;
    height: 5rem;
    display:none;
    cursor:pointer;
}


#emailreport {
  float: left;
  width: 4rem;
  height: 4rem;
  position: relative;
    top:0;
    left:.5rem;  
    background-image: url("/images/email.png");
    background-size: contain;
      background-repeat: no-repeat;
    cursor:pointer;
      
}

#additembutton {
    position: fixed;
    top:2%;
    right:19%; 
        cursor:pointer;
}

.switchdisplay {
    position: fixed;
    top:2%;
    right:3%; 

    display: block;

    float:right;
    cursor:pointer;
 
    height: 4rem;
    width: 4rem;
    margin: 0%;
    background-image: url("/images/photo.png"); 
    background-size: contain;     
}
#addoutfitbutton {
    position: fixed;
    top:2%;
    right:51%; 
    cursor:pointer;
}


#addeventbutton  {
    position: fixed;
      width: 4rem;
  height: 4rem;
    cursor:pointer;
    top:3%;
    right:45%; 
    background-image: url("/images/calendar.jpg");
    background-size: contain;
    background-repeat: no-repeat;

          
}

#addeventitemtbutton  {
    position: fixed;
    top:10%;
    right:45%; 
    display: none;
    cursor:pointer;
}

#toggleeventitemtbutton {
    
    position: fixed;
    width: 4rem;
    height: 2.8rem;
    top:11%;
    right:48.5%; 
    display: none;
    cursor:pointer;    
    background-image: url("/images/tree.png");    
    
    
}

#savereport {
    
    float: left;
    width: 4rem;
    height: 4rem;
    position: relative;
    top:0;
    left:1rem;    
    background-image: url("/images/save.png");
    background-size: contain;
    background-repeat: no-repeat;
    
}

#confirmEmail {
    
    width: 15%;
    
}


.doublecolheader, .singlecolheader {
    
    font-family: scriptfont;
    width:100%;
    text-align: center;
    padding-left: 0;
    margin: 0 auto;
    height: 4%;    
   
}

.outfititemlist {
    
    height: 1.1rem; 
    font-size: 1rem; 
    margin-left: 70%; 
    padding: 0;

}

#itemoutfitoutput {
    
    margin: 0;
    padding: .25rem;
    
}

#singlelisting td:nth-child(2), #rightlisting td:nth-child(2), .outfitlisting td:nth-child(3), .tname {
        
    width: 12rem;
    
}

#singlelisting td:nth-child(3), #rightlisting td:nth-child(3), .outfitlisting td:nth-child(2),.tdesc {
        
    width: 25rem;
    
}

#singlelisting td:nth-child(4), #rightlisting td:nth-child(4), .ttype  {
        
    width: 12rem;
    
}

#imagecanvas {

    border:1px solid black; 
    margin:0 auto;
      
}

#imagecanvasport {

    border:1px solid black; 
    margin: 0 auto;
      
}

.itemfield {
    
    float:right;
    
}

#leftcolheader {
    
    margin: 0 auto;
    height: 4%;
    width: 100%;
    float: left;

}

#rightcolheader {
    
    margin: 0 auto;
    height: 4%;
    width: 100%;
    padding-left: 4.5rem;
    text-align: center;
    float: left;
     
}

#singlepanel {
 
    margin-top: 0rem;
    padding-top: 0rem;
    height:90%;
    width:100%;
    overflow-y: auto;
    -ms-overflow-style: none; 

}

#doubleoutput, #evdoubleoutput, #reportdoubleoutput {

    display:block;
    text-align: left ;
    height:98%;
    width: 84%;
    float:left;
    margin:0px; 
    padding-top:1% ;
    -ms-overflow-style: none; 
    display: none;

}

#leftoutput {
    
    height:99%;
    width:40%;  
    float: left;
    background: 
    url("/images/notebook.png")  25% 0% / 100% 30% repeat-y ;

}

#evleftoutput {
    
    height:99%;
    width:50%;  
    float: left;
    text-align: left;   
    background: 
    url("/images/notebook.png")  25% 0% / 95% 30% repeat-y ;

}


 #rightoutput {
    
    height:99%;
    width:60%;
    float: left;    
    font-family:scriptfont;
    background: 
    url("/images/notebook.png")  25% 0% / 95% 30% repeat-y ;
    
 }

#evrightoutput {
    
    height:99%;
    width:50%;
    float: left;
    background: 
    url("/images/notebook.png")  25% 0% / 95% 30% repeat-y ;

 }
 
 
#reportlefttableheader {
    
    height: 15%;

}

#reportheadertext {

    width:100%;
    height: 4%;
    margin:0px;
    text-align: center;
    text-decoration: underline;
    font-size: 1.5rem;
    font-weight: bold;    
    font-family: scriptfont;  
    position: relative;
    top: 70%;   
    
}

#reportlist {
    
    margin: 0 auto;
    
}



#reportleftpanel {
    
    margin-top: 0rem;
    padding-top: 0rem;
    text-align: left;
    height:70%;
    width:100%;
    float: left;
    -ms-overflow-style: none; 
    overflow-y: auto;
    font-family: scriptfont;  

}

#reportrightpanel {
    
    font-family: scriptfont;     
    
}


 #reportrightoutput {
        height:99%;
    width:60%;

        float: left;
 

    background:  url("/images/sheet-paper.png")  25% 0% / 95% 40% repeat-y ;;
 }
 
#reportleftoutput {
      height:99%;
    width:40%;  
    float: left;
    text-align: left;

    background: 
    url("/images/leftpaper.png")  25% 0% / 100% 100% repeat-y ;

}

#evleftpanel {
    margin-top: 0rem;
    padding-top: 0rem;
    text-align: left;
    height:90%;
    width:100%;
    float: left;
        padding-left: 3.5rem;
     -ms-overflow-style: none; 

   overflow-y: auto;


}
#leftpanel {
    margin-top: 0rem;
    padding-top: 0rem;
    text-align: left;
    height:90%;
    width:100%;
    float: left;
        padding-left: 0rem;
     -ms-overflow-style: none; 

   overflow-y: auto;


}




#rightpanel, #evrightpanel, #reportrightpanel {

    margin: 0 auto 0;
    
    padding-top: 0rem;
    
    
    height:90%;
    width:100%;
        padding-left: 4rem;
   overflow-y: auto;
     -ms-overflow-style: none; 
     float: left;

}
::-webkit-scrollbar { width: 0 };


.select {
    height: 1.5rem;
    font-size: 1rem;
    border:1px solid black;    
    
}





#additem select {

    float:  right;
    height: 1.5rem;
    font-size: 1.1rem;

}



#additem label {
    line-height: 2vh;
    font-size: 1.25rem;

}

#additem input[type="text"]  {

    text-align: left;
    float :right;
    line-height: 1vh;
    padding: .25rem;
    padding-left : .5rem; 
    height: 2vh;
    border:1px solid black;
    font-size: 1.1rem;
}

#additem input[disabled] {
    display:block;    
    text-align: right;
    background-color: white;
    color:black;

    border: none;
}


#itemdescription {
    
    overflow-x:scroll;
    
    
}

.popupmenu{
	position: absolute;
    top: 0;
    left: 0;
    height: 2.7rem;
    width:6rem;
    font-size: 1.75rem;
    text-align: left;
    padding: 1rem;
	border-radius: .5rem;
    background-image: url("/images/silver.jpg"); 
    border: solid black .125rem;
   	display: none;
	pointer-events: none;

}



.menurow {

	font-size: 1rem ;
    line-height: 1.2rem;
}


.menurow:hover { background: #00d9ff; }

button {
    font-size: 1rem;
    width:5rem;
}