/* dockonit.css */

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }

body { font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif; background-color:#fff; margin-top:0px; border-top:0px; padding:0px; color:#003; height:100%;}

p { font-size: 16px; line-height:24px; margin-top: 20px; }

table {
	background-color:#fff;
	border-collapse: collapse;
	width: 100%;
}

th {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid #06C;
}

td {
	padding: 5px;
	text-align: left;
}

/*
ul {
	margin:0;
	padding-left:30px;
}
*/

/* color styles : Blue */
.color { color:#00c; }
.colorHeavy { color:#00c; font-weight:bold;}
.colorLarge {font-size:18px; color:#00c; font-weight:bold; margin-top:20px; margin-bottom:10px;}
.colorxLarge {font-size:22px; color:#00c; font-weight:bold; margin-top:20px; margin-bottom:15px;}
.colorxSmall {font-size:14px; color:#00c; font-weight:normal;}

a.colorHeavy { text-decoration:none; color:#00c; }

/* color styles : Grey */
.color2 { color:#999; }

.super { vertical-align: text-top;}

#pageLayout {
	width:100vw;
	min-height:100%;
/*	overflow:auto;*/
	background-color:#fff;
/*	margin-right:auto; */
	margin-left:5px; 
	padding-bottom:100px;
/*	position:relative;*/
}

#dockonit_banner {
    width:100vw;
}

#banner_img {
    width:100vw;
}

/* menu classes - computer screen */

@media (min-width: 1000px) {
    
    #appLogo {  /* App Logo */
        position: absolute;
/*        float:left;*/
        left:20px;
        top:26vw;
        width: 20vh;
        height: 20vh;
        border-radius: 1vw;
        z-index:10;
        border:1px solid #06C; 
        filter: drop-shadow(3px 3px 5px #000000);
    }

    nav {  /* row of horizontal nav buttons */
        position: absolute;
        left:23vh;
        top:35vw;
        z-index:20;
        width:85vw; 
        border:0px;
        filter: drop-shadow(2px 1px 2px #000000);
    }

    nav a:link, #workspace_nav_bar a:link, #ownerNavBar a:link, #logOutBtn, #resBtn, #mapBtn, #backBtn, #editBtn, #addBtn, #addResBtn {
        display:block;
        width:10vw;
        font-size:18px;
        font-family: 'Open Sans Condensed', Verdana, sans-serif;
        font-weight:bold;
        padding-top:10px;
        padding-bottom:10px;
        padding-left:5px;
        padding-right:5px;
        text-decoration:none;
        border:1px solid #06C; 
/*        margin:5px;*/
        border-radius: 0px;
        color:#006;
        background-color:#fff;
        text-align:center;
    }

    nav li, #workspace_nav_bar li, #ownerNavBar li, #logOutBtn, #resBtn, #mapBtn, #backBtn { 
        list-style-type: none;
        display: inline-flex;
        margin: 0.1em 0.3em;
    }

    nav a:hover, a:active {
        background-color:#ddd;
        text-decoration:none;
    }
    
    #burger-menu {
        display: none;
    }
    
    nav input[type="checkbox"], nav label {
        display: none;
    }

    /* Sidebar - if mobile, will move it below */
    #sidebar-col {  
        position: absolute;
        right:0vh;
        top:36.5vw;
/*        float:right;*/
        width:17vw;
        height:100vh;
        background-color:#eee;
        padding: 2vw;
        filter: drop-shadow(-2px 2px 2px #000000);
    }

    #sidebar-appLogo {
        border-radius: 1vw;
        width: 10vw;
        border:1px solid #06C; 
    }
    
    #sidebar-QRCode2025FreeYear {
        border-radius: 1vw;
        width: 10vw;
        border:1px solid #06C; 
    }
    
    .sidebar-links a:link, a:visited {   /* link to appStore */
        display:relative;
        width:14vw;
        font-size:18px;
        font-family: 'Open Sans Condensed', Verdana, sans-serif;
        font-weight:900;
        color:#006;
        text-align:center;
        text-decoration:none;
        padding:0.5vw;
        margin:1vw;
    }

    .sidebar-links a:hover, a:active {
        background-color:#ddd;
        text-decoration:none;
    }
    
    .sidebarText {
        padding-top: 20px;
    }

    .social-icons {  /* social media buttons */
        width: 2.5vw;
        padding: 0.4vw
    }

}

/* =========== if MOBILE phone ============= */

@media (max-width: 999px) {
    
    #appLogo {  /* App Logo */
        position: absolute;
        float:left;
        left:20px;
        top:10vw;
        width: 17vh;
        height: 17vh;
        border-radius: 1vw;
        z-index:10;
        border:1px solid #06C; 
        filter: drop-shadow(3px 3px 5px #000000);
    }

    nav {
        float: right;
/*        justify-content: space-between;*/
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        color: #006;
        z-index:50;
    }
    
    nav a:link, a:visited {
        display:relative;
        width:96vw;
        margin-left: 2vw;
        margin-right: 2vw;
        margin-bottom: 0.5vw;
        font-size:16px;
        font-family: 'Open Sans Condensed', Verdana, sans-serif;
        font-weight:bold;
        padding-top:10px;
        padding-bottom:10px;
        padding-left:5px;
        padding-right:5px;
        text-decoration:none;
        border:1px solid #06C; 
        border-radius: 5px;
        color: #006;
        background-color: #eee;
        text-align:center;
    }    

    nav a:hover, a:active {
        color: #fff;
        background-color:#006;
        text-decoration:none;
    }
    
    input[type="checkbox"]:not(:checked) + ul {
        display: none;
    }
    
    #mobile-menu {
        display: none;
    }
    
    #burger-menu {
        width:8vw;
        margin-right:4vw;
    }
    
    /* Stlying the menu icon, the checkbox stays hidden */
    nav label {
        text-align: right;
        display: block;
        align-self: center;
    }

    /* Because we are in mobile mode, we want to display it as a vertical list */
    nav ul {
/*        display: block;*/
        color: #fff;
    }

    nav ul li {
        display: inline-flex;
        list-style-type: none;
        width: 96vw;
        text-align: center;
        padding: 0.2vh;
        color: #fff;
    }

    /* sidebar mobile styles */
    #sidebar-col {  
       display: none; /* TEMP */
        position: absolute;
        bottom:0vh;
      clear: left; /* */
        width:100vw;
        padding: 30px;
        background-color:#eee;
    }

    #sidebar-appLogo {
        float: left;
        border-radius: 1vw;
        width: 10vw;
        border:1px solid #06C; 
    }
    
    .sidebar-links {
    }
    
    .sidebar-links a:link, a:visited {   /* link to appStore */
        width:14vw;
        font-size:18px;
        font-family: 'Open Sans Condensed', Verdana, sans-serif;
        font-weight:bold;
        color:#006;
        text-align:center;
        text-decoration:none;
        
        padding:0.5vw;
        margin:1vw;
    }

    .sidebar-links a:hover, a:active {
        color:#fff;
        background-color:#ddd;
        text-decoration:none;
    }
    
    .sidebarText {
/*        padding-left: 30px;*/
    }

    .social-icons {  /* social media buttons */
        width: 2.5vw;
        padding: 0.4vw
    }
}


/* main body classes */
    
#contentCol {
    position: relative;
    top: 5vw;
    float:left;
    width: 65vw;
    padding-left: 5vw;
    padding-bottom: 10vw;
}

iframe {
    box-shadow: -1px 3px 15px -4px rgba(0,0,0,0.76);
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

#eula {
    width: 60vw;
    height: 200vh;
}

.embedded_video {
    height: 60vw;
    padding: 2vw;
}

.float-left {
    float: left;
}

.center {
	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

.bulleted_list {
	margin-left:30px;
	line-height: 30px;
}

.dbl_bulleted_list {
	margin-left:40px;
}


#userFeedback {
/*    width: 7vw;*/
    margin-top: 10px;
	padding:10px;
    border:1px solid #06C; 
    border-radius: 10px;
}


#partner-appLogo {
    margin-top: 20px;
    border-radius: 1vw;
    width: 30vw;
    border:1px solid #06C; 
	padding:20px;
    box-shadow: -1px 3px 15px -4px rgba(0,0,0,0.76);
}

/*  for owners - desktop only - no mobile version */

#editBtn, #addBtn {   /* placed inline with fieldset bounding box ... negative top */
    position: absolute;
    top: -25px;
    right: 5px;
}

#ownerTitleBar {
    position: relative;
	float:left;
}

#ownerNavBar, #addResBtn {
    position: relative;
	float:left;
    top: -20px;
}




/* ========================================================================================== */

/* FORM table styling */
table td.formLabels { text-align: right; width:200px; vertical-align: baseline; font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif; font-weight: 700; }
table td.formDisplay  { text-align: left; vertical-align: top; font-weight: 300; width: auto; } 
table td.formInputs  { text-align: left; vertical-align: baseline; font-weight: 300; } 
table td.formInfo { font-size:11px; color:#c00; font-weight: bolder; vertical-align: top; }

table td.labels { text-align: right; width:120px; vertical-align: baseline; font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif; font-weight: 700; font-style: italic; }

table th.month {  background-color: #eee; text-align: center; border: 1px solid #666; border-right: 3px solid #666; } 
table th.dow {  background-color: #fff; text-align: center; }
table th.dom {  background-color: #eee; text-align: center; border: 1px solid #666; }

table th.dowDivider { background-color: #fff; text-align: center; border-right: 3px solid #666; } 
table th.domDivider { background-color: #eee; text-align: center; border: 1px solid #666; border-right: 3px solid #666; } 
table th.weekDivider { background-color: #eee; text-align: center; border-right: 3px solid #666; } 
table td.falseDivider { background-color: #f99; text-align: center; border: 1px solid #666; border-right: 3px solid #666; }

/* weekend formatting */
table th.dowWeekend {  background-color: #ddd; text-align: center; }
table th.domWeekend { background-color: #ddd; text-align: center; border: 1px solid #666; }
table td.falseWeekend { background-color: #e88; text-align: center; border: 1px solid #666; } 
table th.dowDividerWeekend { background-color: #ddd; text-align: center; border-right: 3px solid #666; } 
table th.domDividerWeekend { background-color: #ddd; text-align: center; border: 1px solid #666; border-right: 3px solid #666; } 
table td.falseDividerWeekend { background-color: #e88; text-align: center; border: 1px solid #666; border-right: 3px solid #666; }

table td.false { background-color: #f99; text-align: center; border: 1px solid #666; } 
table td.true {  background-color: #6c9; text-align: center; border: 1px solid #666; } 

table td.resStart {  
    text-align: right; 
    background-image:url('../images/td_start_day_fill.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-top: 1px solid #666; 
    border-bottom: 1px solid #666; 
    border-left: 1px solid #666; 
} 

table td.resMid {  background-color: #6c9; text-align: right; border-top: 1px solid #666; border-bottom: 1px solid #666; } 

.moveRight {
    position: relative;
    right: -8px;
}

.moveUp {
    position: relative;
    top: -10px;
}

table td.resEnd {  
    background-image:url('../images/td_end_day_fill.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: left; 
    border-top: 1px solid #666; 
    border-bottom: 1px solid #666; 
}

/* ======== FORMS INPUT TYPES ====== */
form {
	padding: 10px;
}

legend {
	padding: 5px;
}

input[type=text], input[type=email], [type=date] {
	width: 50%;
	margin-bottom: 10px;
	padding: 6px;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 16px; 
}

input[type=file] {
/*    display: none;*/
}

select {    
	padding: 5px;
	border: 1.5px solid #06C; 
	border-radius: 4px;
	background-color: #ddd;
	font-size: 14px; 
}

option {
    background-color:#006;
    color: #fff;
}

textarea {
	width: 100%;
	height: 100px;
	padding: 10px;
	margin-bottom: 10px;
	box-sizing: border-box;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #fff;
	font-size: 16px; 
    white-space: pre;
}

input[type=button], input[type=submit], input[type=cancel], input[type=reset] {
	color:#fff;
	background-color:#006;
	text-align:center;
    padding: 10px 20px;
    margin: 4px;
	text-decoration:none;
	border-radius: 4px;
    border: none;
	font-size:18px;
    font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	cursor: pointer;
}

.actionBtn {
    padding: 2px 10px 4px 10px;
    margin: 0 5px 5px 0;
    border: none;
    border-radius: 3px;
    color: #E6E6E6;
    background-color: #336699;
    font-size: 14px;
    cursor: pointer;
}

/* to hide/unhide password field */
.inputPWcontainer {
	width: 50%;
	margin-bottom: 10px;
	padding: 5px;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #f8f8f8;
    align-items: center;
    display: flex;
}

.visibility {
    margin: 0 4px;
}

.inputPWcontainer input[type=password], .inputPWcontainer input[type=text] {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border:0px; 
    outline: none;
	font-size: 16px; 
	background-color: #f8f8f8;
}

#togglePW {
	font-size:12px;
}


/* ========================================================================================== */
/* Owner Page styles */

#ownersPageLayout {
	width:85%;
	min-height:100%;
	overflow:auto;
	background-color:#fff;
	margin-right:auto; 
	margin-left:auto; 
	padding:25px;
	border-left:#999 thin solid; 
	border-right: #999 thin solid;
	border-bottom: #999 thin solid;
	position:relative;
}

#ownersAppLogo {  /* App Logo */
	position:absolute;
    border-radius: 20px;
	z-index:10;
	left:15px;
	top:-20px;
	border:1px solid #06C; 
} 

#top_banner {  /* grey bar behind nav_bar buttons under banner image */
	position:relative;
	width:100%;
	height:100px;
	background-color:#eee;
	border-radius: 20px;
}

#workspace_nav_bar { 
	position:absolute;
	z-index:20;
	width:750px; 
	border:0px;
	left:155px;
	top:30px;
}

.fieldSets { 
    position: relative;
}

.fieldSets legend {
    font-weight:bold;
}

.whiteBackground { background-color: #fff; }
.grayBackground { background-color: #eee; }

.linkButton, .linkButton:visited {
    font-weight:bold;
    background: none;
    border: none;
    color: blue
}

.linkButton:hover{
    background: none;
    text-decoration: underline;
}

/* =============== GOOGLE MAP =============== */
gmp-map {
  height: 100%;
}

#mapDiv {
    height: 600px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

/* ============== MOORINGS ================ */

.resList {
    margin: 10px;
    border: 1px solid #666;
}