/*Site specific css */
/* 0 BASIC TAGS */

div {
    border-style: none;
}

table {
    font-size: 1em;
}

th {
    font-weight: normal;
    text-align: left;
}

td, ul, ol, li {
	font-family: Segoe UI, Tahoma, Arial, Verdana;
	font-weight: normal;
	font-size: 14px;
	font-size: var(--body-font-size);
	text-decoration: none;
}

h1, h2, h3 {
    margin: 0;
    font-family: Segoe UI, Tahoma, Arial, Verdana;
}

p {
    line-height: 1.4em;
}

hr {
    border: 0;
    border-top: 1px solid #bababa;
    height: 1px;
}

a {
    text-decoration: none;
    color: #010189;
}

    a:visited {
        text-decoration: none;
        color: blue;
    }

    a:hover {
        text-decoration: underline;
        color: #e05252;
    }

    a:active {
        color: blue;
    }

input, select, textarea {
    border: 1px solid #e0e0e0;
    border-color: var(--input-border-color);
    border-radius: 2px;
    color: var(--input-color);
    background-color: var(--input-bg-color);    
}

body {
    background-color: White;
    background-color: var(--body-bg-color);
    margin: 0;
    padding: 0;
    font-family: Segoe UI, Tahoma, Arial, Verdana;
    /*font-size: 0.7em;*/
    color: #666666;
    color: var(--primary-color);
}

img {
    border-width: 0;
}

.hidden {
    visibility: hidden;
}

.displaynone {
    display: none;
}

@media (max-width: 1023px) {
    .hiddensm {
        display: none !important;
    }
}

.swAspCheckBox {

}

    .swAspCheckBox label {
        font-weight: normal;
        margin-left: 10px;
        margin-right: 10px;
    }

/* 1 HEADER */

.header {
    background-image: url(https://static.styreweb.com/portal/Images/headerband.gif);
    background-repeat: repeat; /* no-repeat;*/
    position: fixed;
    width: 95%;
    left: 0;
    top: 0;
    height: 81px;
    margin-left: 10px;
    margin-right: auto;
}

h1 {
    margin: 5px 5px 5px 0px;
    font-size: 18px;
}

h2 {
    margin: 5px 5px 5px 0px;
    font-size: 15px;
}


.page {
    background-repeat: repeat-y;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

h3 {
    margin-top: 1.0em;
    margin-bottom: 1.12em;
    font-size: 1.5em;
    font-weight: bold;
}

h4 {
    /*margin-top: 1.0em;*/
    /* margin-bottom: 1.12em;*/
    font-size: 1.3em;
    font-weight: bold;
}

h5 {
    /*margin-top: 1.0em;*/
    margin-bottom: 0.5em;
    font-size: 1.3em;
    font-weight: bold;
    color: black;
}

#sidebar {
    margin-left: 10px;
    margin-right: 10px;    
    height: 100%;
    height: 700px;
}

#content {
    margin-left: 15px;
    height: 700px;
}
/*
#whatsnew {
	float: left;
	width: 200px;
	height: 100%;
}

#coollinks {
	margin-left: 220px;
}

#resume h4, #links h4 {
	margin-top: 0;
	border-top: 1px solid #bababa;
	padding-top: 1.0em;
	position: absolute;
	left: 37px;
	width: 214px;
}

#resume #photo {
	position: absolute;
	left: 37px;
	top: 20px;
	width: 214px;
}

#resume .first {
	margin-top: 0;
	border-top: 1px solid #bababa;
	padding-top: 1.5em;
}
*/
dl {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #bababa;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    position: relative;
}

dt {
    position: absolute;
    left: 0;
}

dd {
    margin-left: 150px;
    height: 2.0em;
}

.emptydata td {
    padding: 50px;
    color: #aeaeae;
}



/* 3 FOOTER */
/*
.footerbg {
    background-image: url(images/footer-side.gif);
    background-repeat: repeat-x;
    width: auto;
    height: 75px;
    left: 0;
    position: fixed;
    bottom: 0px;
    text-align: center;
}

.footer {
    background-image: url(images/footerband.gif);
    background-repeat: repeat;
    margin-left: auto;
    margin-right: auto;
    width: 760px;
    height: 75px;
    text-align: center;
    font-size: 10px;
}
*/
.menub {
    margin: 12px auto 5px auto;
    text-transform: uppercase;
    font-size: 10px;
}

    .menub a:visited {
        color: #d32525;
    }



/* Inline styles are used because image controls hard code a border property */

.photo_198 {
    border: 4px solid #FFFFFF;
}

input.standalone {
    padding: 5px;
}

input.button, button.button, a.button {
    border: 1px solid #cacaca;
    border-color: var(--button-border-color);
    font-family: Segoe UI, Tahoma, Arial, Verdana;    
    font-size: 10pt;    
    color: black;
    color: var(--button-color, black);
    cursor: pointer;    
	background-color: #f9f9f9;    
    background-color: var(--button-bg-color);
	padding: 2px 4px 2px 4px;
	margin: 1px 8px 1px 1px;
    border-radius: 4px;
}

	input.button:hover, button.button:hover, a.button:hover {        
    border: 1px solid #7eb4ea;
        border-color: var(--button-border-hovercolor);
    background-color: #c2d8ff;
        background-color: var(--button-bg-hovercolor);
    }

button[disabled], input[disabled] {
    color: silver;
}

.button.large {
    padding: 6px 12px;
    font-size: 18px;
}

.button.xlarge {
    padding: 12px 24px;
    font-size: 24px;
}
.button.button-primary, .dock-toolbar-content .button.button-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .button.button-primary:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }
.button.button-success {
        color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
    .button.button-success:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }
.button.button-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
    .button.button-info:hover {
        color: #fff;
        background-color: #31b0d5;
        border-color: #269abc;
    }
.button.button-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
    .button.button-warning:hover {
        color: #fff;
        background-color: #ec971f;
        border-color: #d58512;
    }
.button.button-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

    .button.button-danger:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }

.buttonconfirm, .button.buttonconfirm {
    background-color: #7CE67C;
    border: 1px solid rgb(45, 166, 45);
}

    .buttonconfirm:hover, .button.buttonconfirm:hover {
        background-color: #7CE67C;
        border: 1px solid rgb(45, 166, 45);
    }

.buttonwarning, .button.buttonwarning {
    color: white;
    background-color: #f0ad4e;
    border-color: #eea236;    
}

    .buttonwarning:hover, .button.buttonwarning:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
    }

INPUT.bigbutton {
    border-left: solid 1px #336699;
    border-top: solid 1px #336699;
    border-right: solid 1px #666666;
    border-bottom: solid 1px #666666;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    padding-left: 7px;
    padding-right: 7px;
    font-family: 'Arial', 'Helvetica';
    /*font-weight: bold;*/
    font-size: 12pt;
    color: #FFFFFF;
    cursor: pointer;
    background-color: #00a966;
    /*box-shadow: inset 0px 0px 0px 1px rgba(255,115,100,0.4), 0px 1px 3px #333;*/
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

a.button {
    text-decoration: none;
    user-select: none;
}
    a.button i {
        margin: 0 3px;
        font-style: normal;
        font-size: 16px;
    }

a.bigbutton {
    border: solid 1px #009258;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    padding-left: 7px;
    padding-right: 7px;
    font-family: 'Arial', 'Helvetica';
    /*font-weight: bold;*/
    font-size: 12pt;
    color: #FFFFFF;
    cursor: pointer;
    background-color: #00a966;
    border-radius: 4px;    
}

a.iconlink > img {
    max-width: 25px;
}

.greenbutton {
    background-color: #7CE67C;
    border: 1px solid rgb(45, 166, 45);
    padding: 5px 8px 5px 8px;
    margin: 3px;
}

.DetailViewEditCell {
    border-bottom: solid 1px #CCCCCC;
    padding-right: 4px;
    width: 98%;
    min-width: 150px;
}

/*Modal Popup*/
.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.modalPopup {
    background-color: #f7f7f7;
    border: solid 1px silver;
    border-radius: 4px;
    overflow: hidden;
    /*padding: 3px;*/
    width: 250px;
}

.modalPopup__Title {
    cursor: move;
    background-color: #95ceff;
    border: solid 1px #95ceff;
    border-bottom: solid 1px #5cb4ff;
    color: Black;
}

.modalPopup__Body {
    padding: 0 5px;
}

.modelPopupContent {
    margin: 3px;
    overflow: auto;
}

.survey__section {
    border: solid 1px #E1E1E1;
    border-radius: 5px;
    margin: 10px;
    margin-left: 0;
    margin-right: 0;    
}

.surveyinstructionsection {    
    padding: 10px;
}

.surveyheader {
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (min-width: 1025px) {
    .surveyheader {
    margin-top: 50px;
    margin-bottom: 40px;
    }
}

@media (min-width: 1023px) {
    .survey__section {
        margin-left: auto;
        margin-right: auto;
        max-width: 900px;
    }
}

.survey__questionname {
    padding: 10px;
    background-color: silver;
}

.survey__questioninstruction {
    padding: 10px;    
}

.survey__questionoption {
    padding: 10px;

}

.SurveyQuestions {
    /*background:;*/
}

.SurveyItemStyle {
    /*background:;*/
}

.SurveyAlternatingStyle {
    /*background:;*/
}

.SurveyFooterStyle {
    /*background:;*/
}

.JournalMultiEditEntriesContainer {
}

    .JournalMultiEditEntriesContainer legend {
        margin-bottom: 0;
        margin-left: 5px;
        font-size: 15px;
    }

.JournalMultiEditTable {
    background-color: #ECECEC;
    width: 100%;
    border-collapse: collapse;
}

    .JournalMultiEditTable thead, .JournalMultiEditTable tfoot {
        background-color: #DDDDDD;
    }

    .JournalMultiEditTable tbody {
        background-color: white; /*#F2F2F2*/
        white-space: nowrap;
    }

        .JournalMultiEditTable tbody tr.alternate {
            background-color: White;
        }

.JournalMultiEditAmount {
    width: 80px;
    text-align: right;
    padding: 2px 5px;
}
.JournalMultiEditDescription {
    width: 100%;
    padding: 2px 5px;
}

.JournalMultiEditColumnLineNumber {
    width: 30px;
    max-width: 30px;
    padding: 2px 5px;
}

.JournalMultiEditColumnAccount {
    width: 180px;
    min-width: 60px;
    padding: 2px 5px;
}

.JournalMultiEditColumnAccountCtrl {
    width: 100%;        
    padding: 1px 1px;
    min-width: 200px;
    max-width: 200px;
}

.JournalMultiEditColumnAmount {
    padding: 2px 0 2px 5px;
    min-width: 98px;
    width: 98px;
    border-right: none;
}

.JournalMultiEditAmountCtrl {
    padding: 2px 5px;
    min-width: 80px;
    width: 88px;
    max-width: 88px;
    text-align: right;
}

.JournalMultiEditColumnDebitCredit {
    padding: 2px 5px 2px 3px;
    border-left: none;
    color: silver;
    min-width: 20px;
}

.JournalMultiEditColumnReference {
    padding: 2px 5px;
}

.JournalMultiEditColumnReferenceTypeCtrl {
    padding: 2px 5px;
}

.JournalMultiEditColumnReferenceCtrl {
    width: 180px;
    max-width: 180px;
    padding: 2px 5px;
}

.JournalMultiEditColumnInvoice {
    width: 100px;
    max-width: 100px;
    padding: 2px 5px;
}
.JournalMultiEditColumnVat {
    max-width: 150px;
    width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 2px 5px;
}

.JournalMultiEditColumnVat select {
    width: 100%;
}

.JournalMultiEditColumnVatCtrl {    
    padding: 2px 5px;
     width: 100px;
    max-width: 100px;    
}
.JournalMultiEditColumnDescription {
    padding: 2px 5px;
}

.JournalMultiEditDescriptionCtrl {
    width: 150px;
    max-width: 150px;
    padding: 2px 5px;
}

.ratingStar {
    margin: 0px;
    padding: 0px;
    width: 13px;
    height: 12px;
    font-size: 0pt;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url("https://static.styreweb.com/portal/Images/FilledStar.png");
}

.emptyRatingStar {
    background-image: url("https://static.styreweb.com/portal/Images/EmptyStar.png");
}

.savedRatingStar {
    background-image: url("https://static.styreweb.com/portal/Images/SavedStar.png");
}

.LoginTextBox {
    Width: 190px;
    Height: 18px;
    margin: 5px 0px 5px 0px;
    padding: 3px;
}

    .LoginTextBox:focus {
        background-color: yellow;
    }

.warningbox {
    border: 1.5px solid #E7EC00;
    border-radius: 4px;
    margin: 10px 15px 10px 5px;
    padding: 10px;
    background-color: #FDFFA1;
    /*max-width: 700px;*/
}

.errorbox {
    border: 1.5px solid rgb(255, 153, 153);
    border-radius: 4px;
    margin: 10px 15px 10px 5px;
    padding: 10px;
    background-color: rgb(255, 184, 184);
    /*max-width: 700px;*/
}

.systemmessage {
    border: 1.5px solid #9FCEE7;
    border-radius: 4px;
    margin: 10px 15px 10px 5px;
    padding: 10px;
    background-color: rgb(217,246,255);
    /*max-width: 700px;*/
}

    .systemmessage div {
    margin: 0px 0px 10px 0px;
    }

    .systemmessage h1 {
        font-size: 12px;
    }

.linkpreview { 
    background: url(https://static.styreweb.com/portal/images/appbar.magnify_12.png) no-repeat 0px 7px;
    padding: 7px 0 0 15px;
}

.button {
    min-width: 20px;
    margin-left: 3px;
}

button.buttonnewicon, INPUT.buttonnewicon, a.buttonnewicon {
    background-image: url(https://static.styreweb.com/portal/images/appbar.add_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    min-height: 23px;
}

button.buttonnewiconcaption, INPUT.buttonnewiconcaption, a.buttonnewiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.add_12b.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonediticoncaption, INPUT.buttonediticoncaption, a.buttonediticoncaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.edit_12b.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttondeleteiconcaption, INPUT.buttondeleteiconcaption, a.buttondeleteiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.delete_12b.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonsearch, INPUT.buttonsearch, a.buttonsearch {
    background: url(https://static.styreweb.com/portal/images/appbar.filter_12b.png) no-repeat 2px 5px;
    padding: 0 0 0 10px;
}

a.buttonsearch {
    padding-left: 16px;
    background-position-y: center;
}

button.buttonsearchcaption, button.buttonsearchiconcaption, INPUT.buttonsearchcaption, INPUT.buttonsearchiconcaption, a.buttonsearchcaption, a.buttonsearchiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.filter_12b.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonmessageicon, INPUT.buttonmessageicon, a.buttonmessageicon {
    background-image: url(https://static.styreweb.com/portal/images/appbar.email_12b.png);
    background-repeat: no-repeat;
    background-position-x: 2px;
    background-position-y: center;
}

button.buttonmessageiconcaption, INPUT.buttonmessageiconcaption, a.buttonmessageiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.email_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttoncloseiconcaption, INPUT.buttoncloseiconcaption, a.buttoncloseiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.cancel_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttoncanceliconcaption, INPUT.buttoncanceliconcaption, a.buttoncanceliconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.cancel_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonuploadiconcaption, INPUT.buttonuploadiconcaption, a.buttonuploadiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.upload_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttondownloadiconcaption, INPUT.buttondownloadiconcaption, a.buttondownloadiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.download_12b.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonprinticoncaption, INPUT.buttonprinticoncaption, a.buttonprinticoncaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.download_12b.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonmoveiconcaption, INPUT.buttonmoveiconcaption, a.buttonmoveiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.arrow.right.left_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonsettingiconcaption, INPUT.buttonsettingiconcaption, a.buttonsettingiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.settings_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonpreviewiconcaption, INPUT.buttonpreviewiconcaption, a.buttonpreviewiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.magnify_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttoncopyiconcaption, INPUT.buttoncopyiconcaption, a.buttoncopyiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.copy_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonexportexceliconcaption, INPUT.buttonexportexceliconcaption, a.buttonexportexceliconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.excel_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonexporticoncaption, INPUT.buttonexporticoncaption, a.buttonexporticoncaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.export_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonexecuteiconcaption, INPUT.buttonexecuteiconcaption, a.buttonexecuteiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.play_12b.png);
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonpiniconcaption, INPUT.buttonpiniconcaption, a.buttonpiniconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.check_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

button.buttonpinremoveiconcaption, INPUT.buttonpinremoveiconcaption, a.buttonpinremoveiconcaption {
    background-image: url(https://static.styreweb.com/portal/images/appbar.check_12b.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: center;
    padding-left: 20px !important;
}

.portrait {
    background-color: red;
}
.portraitimage, .portrait img {
    width: 125px;
    background-color: #bababa;
    margin: 3px;
    padding: 1px; 
    border: 1px solid #CCCCCC;
    align-content: center;
    border-radius: 5px;
}

.changepassword tbody tr {    
    height: 20px;
}

.frontpagecontentbox {
    margin: 8px 8px 24px 8px;
}

	.frontpagecontentbox .frontpagecontentboxheader, .frontpagecontentboxheader {        
        align-items: flex-end;
    }
    .frontpagecontentbox > h4 {
        margin-bottom: 0px;
        font-size: 1.3em;
        color: #2b2a2a;
        display: inline;
    }

        .frontpagecontentbox > h4 > a {
            text-decoration: none;
            color: #2b2a2a;
            margin-left: 5px;
    }

.frontpagecontentboxheader > h4 {
    margin-bottom: 0px;
    padding-top: 24px;
    padding-bottom: 8px;
    font-size: 1.3em;
    font-weight: normal;
    font-variant: small-caps;
    color: #2b2a2a;
    display: inline;
}

.frontpagecontentboxheader > h4 > a {
    text-decoration: none;
    color: #2b2a2a;
    margin-left: 5px;
}

    .frontpagecontentbox > h5 {        
        font-size: 1.15em;
        font-weight: normal;
        color: #2b2a2a;
    }


        .frontpagecontentbox > h5 > a {
            text-decoration: none;
            color: #2b2a2a;
        }

            .frontpagecontentbox > h5 > a:visited {
                text-decoration: none;
                color: #2b2a2a;
            }

            .frontpagecontentbox > h5 > a:hover {
                text-decoration: none;
                color: #2b2a2a;
            }

            .frontpagecontentbox > h5 > a:active {
                color: #2b2a2a;
            }

.frontpagepiechart {
    background-color: var(--data-control-bg-color);
    background-color: #fcfcfc;
    padding: 8px 24px;
    margin: 16px 8px;
    border: solid 1px #d1d1d1;
    border-radius: 15px;
    box-shadow: 2px 2px 10px 0px rgb(209 209 209 / 80%)
}

.frontpagegridcontainer {
    padding: 1px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    overflow-x: auto;
}

.informationbox {
    border-radius: 15px;
    border-style: solid;
    border-width: 1.5px;
    color: rgb(21, 66, 139);
    border-color: #9FCEE7;
    margin: 10px 0px 0px 0px;
    padding: 5px;
    max-width: 700px;
}

    .informationbox > h1 {
        font-size: 12px;
    }

/*.informationbox > div {
    margin: 0px 0px 10px 0px;
}*/

.rotate90 {
    -moz-transform: rotate(-90.0deg);
    -ms-transform: rotate(-90.0deg);
    -o-transform: rotate(-90.0deg);
    -webkit-transform: rotate(-90.0deg);
    transform: rotate(-90.0deg);
}

/*
   Vertical text
   <td><div class="vertical-text"><div class="vertical-text_inner">text</div></div></th>
*/
.vertical-text {
	display: inline-block;
	overflow: hidden;
	width: 1.5em;
}
.vertical-text__inner {
	display: inline-block;
	white-space: nowrap;
	line-height: 1.5;
	transform: translate(0,100%) rotate(-90deg);
	transform-origin: 0 0;
}
    /* This element stretches the parent to be square
   by using the mechanics of vertical margins  */
    .vertical-text__inner:after {
	content: "";
	display: block;
	margin: -1.5em 0 100%;
    }

/*Override Ajax tab header hight*/
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
    height: 23px !important;
}

.ajax__tab_xp .ajax__tab_header .ajax__tab_outer {    
    padding-right: 8px;    
    height: 25px;
    border: solid 1px #D0D0D0;
    border-radius: 6px 6px 0 0;    
    margin: 0 2px;
}

.ajax__tab_xp .ajax__tab_inner {
    padding-left: 10px;
}

.ajax__tab_xp .ajax__tab_tab {
    background-color: transparent;
}

.ajax__tab_xp .ajax__tab_outer .ajax__tab_active {
    background-color: #BBDAFF;
}

/* StyreWeb tab widget*/
.swTabWidget .ajax__tab_header {
    background-color: #F7F7F7;
    border-bottom: solid 1px #D4D4D4;
    height: 25px;
    margin-bottom: 4px;
}

    .swTabWidget .ajax__tab_header .ajax__tab_tab {
    line-height: 22px;
    }
    
    .swTabWidget .ajax__tab_header .ajax__tab_outer {
    padding-right: 8px;    
    height: 25px;
    background-color: #E8E8E8;
    border: solid 1px #D0D0D0;
    border-radius: 6px 6px 0 0;    
    margin: 0 2px;
    }

.swTabWidget .ajax__tab_inner {
    padding-left: 10px;
}

.swTabWidget .ajax__tab_tab {
    background-color: transparent;
}

.swTabWidget a, .swTabWidget a:visited, .swTabWidget a:focus {
    text-decoration: none;
    outline: none;
    color: black;
}

.swTabWidget .ajax__tab_active .ajax__tab_outer  {
    background-color: #BBDAFF;
}

.swTabWidget .ajax__tab_hover .ajax__tab_outer  {
    background-color: #e0eefe;
}

.textcenter {
    text-align: center;
}
.textright {
    text-align: right;
}

.maintenance {
    font-size: 21px;
}

/*Will distribute the two containing elements with 50% width each*/
.container5050 {
    position: relative;
    box-sizing: border-box;
}

    .container5050 > div {
    width: 48%;
    max-width: 50%;
    box-sizing: border-box;
    display: inline-block;
    }

.imageuploadcontainer {

}

	.imageuploadcontainer ul {
    list-style-type: none;
    padding: 20px;
	}

.imageuploadpreview {
    max-width: 100%;
    padding: 10px 0 10px 0;
}

INPUT.TabButton {   
    font-family: 'Arial', 'Helvetica';
	font-weight: normal;
	font-size: 8pt;
    color: black;
	cursor: pointer;
    background-color: #CACACA;
    min-width: 100px;
    margin-left: 0;
    margin-right: 2px;
    white-space: nowrap;
    line-height: 20px;
}

INPUT.TabButtonPressed {  
    color: white;    
    background-color: #3A6EC7;    
}

/*Birthdate list component*/
.birthdatelist {
    background-color: White; 
    width: 100%; 
    border-collapse: collapse; 
    border: none;
    table-layout: fixed; 
    overflow: hidden;
}

.birthdatelistheader {
    background-color: #E0E0E0; 
    white-space: nowrap;
}

    .birthdatelistheader th {
    border: none;
    }

.birthdatelistname {
    font-size: 0.8em;
    line-height: 1.3em;
    white-space: nowrap;
    background-color: White;
    border-top: solid 1px #ededed;
}

.birthdatelistdate {
    font-size: 0.7em;
    line-height: 1em;
    white-space: nowrap;
}

.birthdatelist td {
    border: none;
}

.birthdatelist a, .birthdatelist a:visited, .birthdatelist a:hover {
    text-decoration: none;
    color: black;
}

/* ReactJS Birthdate list*/
.birthdayBox {
            margin: 0px;
            padding: 0px;
}

            .birthdayBox h1 {
                background-color: #f9f9f9;
                margin: 0;
                font-size: 1em;
                line-height: 2em;
                padding-left: 4px;
				padding-top: 4px;
        		padding-bottom: 4px;
			    font-variant: small-caps;
			    font-weight: normal;
            }


.birthdayList {
    background-color: var(--data-control-bg-color);
}

.birthdayList h2 {
            margin: 0;
            font-size: 1em;
            padding-left: 4px;
            line-height: 1.3em;
}

            .birthdayList h2 a {
                text-decoration: none;
                text-decoration-line: none;
                color: #666;
    			font-weight: normal;
            }

.birthday {
            border-bottom: 1px solid rgb(237,237,237);
            line-height: 1.3em;
            padding-top: 4px;
            padding-bottom: 4px;
}

.birthdaydate {
            padding-left: 4px;
            font-size: 13px;
}

            .birthdaydate #age {
                margin-left: 20px;
                margin-right: 5px;
            }

/* Support comment styling*/
.supportcomment {
    background-color: #9bd2c5;
    margin-bottom: 12px;
    padding: 12px;
}

.supportcommentemployee {
    background-color: #c4c4c4;
}

.supportcommentinternal {
    background-color: #d2dce1;
    border-left: 2px solid red;
}

.supportcommenttitle {
    font-size: 12px;
    padding: 2px 5px;
    border-bottom: solid 1px silver;
}

.kbarticleeditor {
    isolation: isolate;
}


.kbarticlepreview {
    isolation: isolate;
}

.kbarticleheader {
    margin: 5px;
}

.kbarticlesummarysidebar {
    display: flex;
    flex-direction: column;
    background-color: #d3dee1;
    padding: 12px 8px;
    gap: 8px;
    font-size: 16px;
    border-radius: 4px;
}

    .kbarticlesummarysidebar a, .kbarticlesummarysidebar a:visited {
        color: black;
        text-decoration: none;
    }

.kbarticlecontent {
    margin: 5px;
    max-width: 900px;
}

.kbarticletags {
    margin: 5px;
    font-size: 11px;
}

.helpcontainer {
    border-left: solid 2px grey;
    width: 400px;
    flex: 0 0 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: gainsboro;
    background-color: var(--sidebarhelp-bg-color);
    user-select: none;
    max-height: calc(100vh - 122px);
}

      .helpcontainer .hidden {
            display: none;
    }

    .helpcontainer .pagehelpheader {
        font-size: 16px;
        font-weight: bold;
        background-color: #cecece;
        background-color: var(--sidebarhelp-header-bg-color);
        padding: 6px 3px;
        margin: 5px 5px 0 5px;
        border-radius: 3px 3px 0 0;
    }

    .helpcontainer .pagehelpsubheader {
        font-size: 16px;
        font-weight: bold;
        background-color: #cecece;
        background-color: var(--sidebarhelp-header-bg-color);
        padding: 6px 3px;
        margin: 5px 5px 0 5px;
        border-radius: 3px 3px 0 0;
    }

    .helpcontainer .pagehelpcontent {
        font-size: 12px;
        padding: 3px;
        margin: 0 5px 5px 5px;
        background-color: white;
		background-color: var(--sidebarhelp-content-bg-color);
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 40px;
    }

        .helpcontainer .pagehelpcontent ul {
            padding: 5px 25px;
        }

        .helpcontainer .pagehelpcontent li {
            font-size: 12px;
            line-height: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .helpcontainer a, .helpcontainer a:visited, .helpcontainer a:hover {
        color: black;
        color: var(--primary-color);
        text-decoration: none;
    }

#contentcontainer {
	width: 100%;
	overflow-x: auto;
}

@media print {
	#contentcontainer {	
		overflow-x: visible;
	}
}

.helpcontainerhidden #helpcontainer {
    display: none;
}

/* used content ul */
.nakedlist {
    padding: 0;
}

    .nakedlist li {
    list-style-type: none;
    }

        .nakedlist li > div {
    margin-left: 30px;
        }

        .nakedlist li i {
    margin: 5px;
        }

        .nakedlist li a, .nakedlist li a:visited, .nakedlist li a:hover {
    color: black;
    text-decoration: none;
    padding: 5px;
    border-radius: 3px;
        }

            .nakedlist li a:hover {
    background-color: #B5B5B5;
            }


/* Twitter typeahead stylling */
/*Input control that have type ahead attached*/
.tt-input {
}
/*Control owning all preview items*/
.tt-menu {
    background-color: #E8E8E8;
    border: solid 1px lightgrey;
    padding: 5px;
}

.tt-dataset {
}
    
.tt-dropdown-menu {
    background-color: #fff;
    border: 1px solid #000;
}

.tt-suggestion {
    white-space: nowrap;
    padding: 2px;
}

    .tt-suggestion.tt-cursor {
    background-color: #ccc;
    }

.triggered-events {
    float: right;
    width: 500px;
    height: 300px;
}

/* End Twitter typeahead stylling */

a.helpbutton, a.helpbutton:visited  {
    color: black;
    color: var(--primary-color);
    text-decoration: none;
    margin: 4px;    
}

a.anonymouslink, a.anonymouslink:visited {
    color: black;
    color: var(--primary-color);
    text-decoration: none;
}

/*Marina map svg module*/
.svg-marinamap {
    fill: #BBBBBB;
}

.svg-marinamaptitlerect {
    fill: transparent;
}

.svg-marinamaptitltext {
    fill: black;
    font-size: 1.25rem;
    /*text-align: center;*/
    /* text-anchor: middle; */
    /*width: 300px;*/
}

.svg-marinamap-boat {    
}

.svg-marinamap-boatrect {
    fill: #E1E2E2;
}

.marinamap-free .svg-marinamap-boatrect {
    fill: #BAFFCD;
}

.marinamap-memberended .svg-marinamap-boatrect {
    fill: #FF7E7E;
}

.marinamap-sublet .svg-marinamap-boatrect {
    fill: #ced7e1;
}

.svg-marinamap-boattext {
    fill: black; /*Text color*/
    font-size: 0.75rem;
}

.svg-marinamap-boattextsize {
    fill: black; /*Text color*/
    font-size: 0.63rem;
}

.glyphicon.linkicon {
    color: #c7c7c7;
    font-size: 10px;
    margin-left: 7px;
    margin-right: 7px;
}

/* CalendarWeekView component */
.calendarweekview {
    max-width: 1110px;
}

.calendarweekview__pager {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    background-color: silver;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.calendarweekview__pager__button {
    padding: 10px 20px;
    background-color: transparent;
    border: none;
}

.calendarweekview__weekcontainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.calendarweekview__TimeColumn {
    width: 60px;
    border-right: solid 1px #ededed;
    position: relative;
}

.calendarweekview__DayColumnContainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    overflow-y: auto;
}

.calendarweekview__DayColumn {
    width: 150px;
    border-right: solid 1px #ededed;
    position: relative;
}

.calendarweekview__BookedColumn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.calendarweekview__ColumnHeader {
    padding: 10px;
    font-weight: bold;
    border-bottom: solid 1px #a7a7a7;
    height: 40px;
    max-height: 40px;
    white-space: nowrap;
}

.calendarweekview__HourCell {
    height: 50px;
    max-height: 50px;
    padding: 2px 5px;
    border-bottom: solid 1px #ededed;
}

.calendarweekview__HourCellBooked {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #e0e0e0;
    border: solid 1px #c5c5c5;
    overflow: hidden;
}

.calendarweekview__HourCellBookedOverlapping {
    position: absolute;
    left: 0;
    right: 0;
    background-color: red;
    overflow: hidden;
    opacity: 0.6; /*causes overlapping bookings to show*/
}

.calendarweekview__HourCellBooked__Header {
    padding: 2px 5px 0;
    font-size: smaller;
    white-space: nowrap;
    overflow: hidden;
    color: black;
}

.calendarweekview__HourCellBooked__Content {
    padding: 0px 5px;
    font-size: smaller;
    overflow: hidden;
    color: black;
}

.calendarweekview__HourCellBooked__Content_Content2 {    
    font-size: 10px;    
}

/* Calendar Schedule week view*/
.calendarscheduleview {
    /*max-width: 1110px;*/
}

.calendarscheduleview__pager {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    background-color: silver;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.calendarscheduleview__pager__button {
    padding: 10px 20px;
    background-color: transparent;
    border: none;
}

.calendarscheduleview__weekcontainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    overflow-y: auto;
    padding-bottom: 10px;
}

.calendarscheduleview__ResourceColumn {
    /*width: 60px;*/
    border-right: solid 1px #ededed;
    position: relative;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .calendarscheduleview__ResourceColumn {
        max-width: 100px;
        white-space: normal;
    }
}

.calendarscheduleview__ResourceDay {
    position: relative;
    border-bottom: solid 2px #ededed;
}

.calendarscheduleview__DayColumnContainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    overflow-y: auto;
}

.calendarscheduleview__DayColumn {
    /*width: 150px;*/
    border-right: solid 1px #ededed;
    position: relative;
}

.calendarscheduleview__BookedColumn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.calendarscheduleview__ColumnHeader {
    font-weight: bold;
    border-bottom: solid 1px #a7a7a7;
    height: 50px;
    max-height: 50px;
    white-space: nowrap;
}

.calendarscheduleview__ColumnHeader__Date {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    padding: 3px;
}

.calendarscheduleview__Row__Hours {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    border-right: solid 5px #efefef;
}

.calendarscheduleview__ResourceCell {
    padding: 2px 5px;
    border-right: solid 3px #ededed;
    min-height: 100px;
    max-height: 100px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.calendarscheduleview__HourCellHeader {
    padding: 2px 5px;
    border: solid 1px tranparent;
    border-right: solid 1px #ededed;
    width: 25px;
    min-width: 25px;
}

.calendarscheduleview__HourCell {
    padding: 2px 5px;
    border: solid 1px tranparent;
    border-right: solid 1px #ededed;
    width: 25px;
    min-width: 25px;
    min-height: 100px;
}

.calendarscheduleview__HourCellBooked {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #e0e0e0;
    border: solid 1px #c5c5c5;
    overflow: hidden;
}

.calendarscheduleview__HourCellBookedOverlapping {
    position: absolute;
    left: 0;
    right: 0;
    background-color: red;
    overflow: hidden;
    opacity: 0.6; /*causes overlapping bookings to show*/
}

.calendarscheduleview__HourCellBooked__Header {
    padding: 3px 5px 0;
    font-size: smaller;
    white-space: nowrap;
    overflow: hidden;
    color: black;
}

.calendarscheduleview__HourCellBooked__Content {
    padding: 4px 5px;
    font-size: smaller;
    overflow: hidden;
    color: black;
}

.calendarscheduleview a, .calendarscheduleview a:visited, .calendarscheduleview a:hover {
	color: blue;
}


.swModalDialogFrame {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(150, 150, 150, 0.87);
    z-index: 99998; /* Bootstrap uses 99999 for their date popup and we want that one ontop*/
}

.swModalDialog {
    position: fixed;

    background-color: white;
    border: solid 1px #696969;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;        
    min-width: 300px;
    max-width: 95vw;
    box-shadow: 5px 5px 5px 0px rgb(95, 95, 95);    
    resize: both;
    overflow: hidden;
}

.swModalDialogHeader {
    padding: 8px 8px;
    background-color: #e8e8e8;
    margin-bottom: 10px;
    border-bottom: solid 1px #b1b1b1;
    background-color: #065986;
    color: #d6e8ff;
    font-size: 1.0rem;
    user-select: none;
}

.swModalDialogHeader__Logo {
    float: left;
    width: 23px;
    height: 25px;
    background-image: url(https://static.styreweb.com/portal/images/Logo41.png);
    background-repeat: no-repeat;
    background-position: center center;    
    margin-right: 10px;
    background-size: 25px;
}

.swModalDialogHeader__Title {
}

.swModalDialogContentContainer {
    overflow: auto;
}

.swModalDialogBody {
    /*padding: 10px;*/
    -webkit-flex: 1;
    flex: 1;
    max-height: 80vh;
    overflow-y: auto;
}

    .swModalDialogBody.padding {
        padding: 10px;
    }


.swModalDialogGuideContent {
    background-color: #dbfaff;
    padding: 10px;
    border-bottom: solid 1px silver;
    font-size: 0.75rem;
}

    .swModalDialogGuideContent h1 {
        font-size: 0.875rem;
    }

    .swModalDialogGuideContent h2 {
        font-size: 0.82rem;
    }

.swModalDialogToolbarContent {
    position: relative;
    overflow: hidden;
    background-color: #ececec;
    padding: 5px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: solid 1px #d8d8d8;
    margin-top: 10px;
    user-select: none;
}

.swModalDialog input, .swModalDialog select {
    padding: 4px;
}

.swModalDialog td {
    padding: 4px;
}

/* Themes*/
.swModalDialog-Medium .swModalDialog {
    width: 400px;
}

.swModalDialog .sidebartab {
    padding: 10px;
    background-color: ghostwhite;
    color: black;
    cursor: pointer;
    text-decoration: none;
}

    .swModalDialog .sidebartab.selected, .swModalDialog .sidebartab.selected:hover {
        background-color: #03A9F4;
    }

.swModalDialog .sidebartab:visited {
    color: black;
}

    .swModalDialog .sidebartab:hover {
        background-color: #3ce0ff;
    }

.swModalDialog .swModalDialogWarning {
    padding: 10px;
    background-color: #fcfc16;
    color: red;
}

.meetingprotocoltilecontainer  {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
}

.meetingprotocoltile {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 10px;
    background-color: #f1f1f1;
    border: solid 1px silver;
    border-radius: 2px;
    width: 368px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;    
}

    .meetingprotocoltile a, .meetingprotocoltile a:visited, .meetingprotocoltile a:hover {
        text-decoration: none;
        color: black;
    }
    
.meetingprotocoltile--header {
        background-color: #d0d0d0;
        padding: 5px;
        font-size: 16px;
}

.meetingprotocoltile--content {    
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.meetingprotocoltile--contentrow {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex: 1;
    flex: 1;
}

.meetingprotocoltile--content--attendance {
    background-color: #3be0e0;
    width: 60px;
    height: 100%;
    font-size: 18px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meetingprotocoltile--content--attendance--title {
    font-size: 11px;
}

.meetingprotocoltile--content--attendance--content {

}

.meetingprotocoltile--content--attendance--footer {
    font-size: 11px;
}

.meetingprotocoltile--content--cell {
    flex: 1;
    padding: 4px;
    background-color: white;
    margin: 5px;
    font-size: 12px;
}

    .meetingprotocoltile--content--cell h1 {
        font-size: 14px;
    }

@media (max-width: 400px) {
    .meetingprotocoltile {
        margin-left: 0;
        margin-right: 0;       
    }

    .meetingprotocoltile h1 {
        font-size: 13px;
        text-overflow: ellipsis;
    }
}

@media (max-width: 800px) {
    .meetingprotocoltile {
        margin-left: 5px;
        margin-right: 5px;
    }        
}
/* Member stat pie */
.memberstat_pie_legend {
    max-width: 250px;
    margin-top: 15px;
}

    .memberstat_pie_legend ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .memberstat_pie_legend span {        
        padding: 2px 7px;
        border-radius: 23px;
        margin-right: 6px;
        margin-bottom: -2px;
    }

    .memberstat_pie_legend li {
        margin-bottom: 10px;
        display: inline-block;
        margin-right: 10px;
    }

/* Select Member Dialog */
.SelectMember__Background {
    margin: 5px;
}

.SelectMember__Dialog {
    position: relative;
    background-color: white;
    border: solid 1px silver;
    border-radius: 4px;
    overflow: hidden;
}

.SelectMember__Header {    
}

.SelectMember__HeaderTitle {
    font-size: 15px;
    background-color: #ecf4ff;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 5px;
    user-select: none;
}

.SelectMember__HeaderToolbar {
    background-color: #ececec;
    padding: 8px;
    user-select: none;
}

.SelectMember_Body {
    max-height: calc(100vh - 180px);
    min-height: 200px;
    overflow: auto;
    padding-top: 10px;
}

    .SelectMember_Body label {
        font-weight: normal;
    }

.SelectMemberModal.SelectMember__Background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 999998;
    background-color: rgba(150, 150, 150, 0.87);
}
.SelectMemberModal .SelectMember__Dialog {
    max-width: 1050px;
    margin: 60px 20px 20px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 0px rgb(95, 95, 95);
    resize: both;
    overflow: hidden;
    border: solid 1px #4f4f4f;
}

.SelectMemberModal .SelectMember__HeaderTitle {
    padding: 8px;
    background-color: #065986;
    color: #d6e8ff;
    user-select: none;
}

.section_guide_container {
    background-color: #f3f3f3;    
    border-radius: 4px;
    padding: 10px 5px;
    width: 500px;    
}

.section_guide_container_guidetext {
    color: #0057a5;
    font-style: italic;
}

.section_guide_container_guidesubtext {
    color: #0057a5;
    font-style: italic;
    font-size: 11px;
	margin-top: 5px;
}

/* TODO: Remove once label/input has normal definitions globally */
.section_guide_container label {
	font-weight: normal;
	margin-bottom: auto;
	margin-right: 10px;
	line-height: 28px;
}

.section_guide_container input, .section_guide_container select {
	font-weight: normal;
	padding: 3px 5px;
}

/* Bootstrap override */
.nav-tabs, .ajax__tab_header {
    user-select: none;
}

.alert {
    margin: 10px;
    padding: 5px 15px;
}

.instruction_container {
    margin: 5px;
    border: solid 1px #c3e6f7;
    background-color: #e6f4fb;
    padding: 5px;
    font-style: italic;
    width: 100%;
    user-select: none;
}

.page_guide {
    margin: 5px;
    background-color: #a4e6ff;
    border: solid 2px #6ad6ff;
    border-radius: 4px;
    padding: 5px;
    color: black;
}

.page_guide a, .page_guide a:visited, .page_guide a:hover {
    color: #121212;
}

.page_guide a:hover {
    color: black;
}

.swCheckboxList {

}

.swCheckboxList input {
    margin-right: 10px;
}

    .swCheckboxList label {
        font-weight: normal;
    }

/* themes */
/* .mobile is for mobile users...more space for click
   .dark for those prefering dark screens...
 */

body.dark  {
	background-color: #252525;
    color: #f3f3f3;
}

.card_buttonlist {
    display: block;
    color: black;
    background-color: whitesmoke;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    text-decoration: none;
}

.card_buttonlist--caption {
    font-variant: small-caps;
}
.card_buttonlist--description{
    font-size: 12px;
    margin-top: 8xp;
}

.card_buttonlist:visited {
    color: inherit;
    text-decoration: none;
}

.card_buttonlist:hover {
    background-color: #e5e5e5;
    color: black;
    text-decoration: none;
}



#helpcontainer.helpopen {
    position: absolute;
    right: 16px;
    height: 90vh;
    top: 5vh;
    bottom: 5vh;
    width: 815px;
    max-width: calc(100vw - 40px);
    border: solid 1px #cbcbcb;
    box-shadow: 0px 0px 4px #dbdbdb;
    background-color: #f7f7f7ed;
    z-index: 100000000;
    border-radius: 6px;
}

.helpcontainer.helpopen .pagehelpheader {
    margin: 0;
    padding: 12px 16px;
    background-color: white;
    font-variant: small-caps;
    letter-spacing: 0.2px;
    font-weight: normal;
    border-bottom: solid 1px #e9e9e9;
}

.helpcontainer.helpopen .pagehelpsubheader {
    margin: 0;
    padding: 12px 16px;
    background-color: transparent;
    font-variant: small-caps;
    letter-spacing: 0.2px;
    font-weight: normal;
    padding-bottom: 0;
    margin-top: 12px;
}

.helpcontainer.helpopen .pagehelpcontentcontainer {
	overflow: auto;
}

.helpcontainer.helpopen .pagehelpcontent {
    margin: 0;
    padding: 12px;
    margin: 12px;
    border-radius: 6px;
    border: solid 1px #e9e9e9;
    font-size: 14px;
    overflow: initial;
    min-height: initial;
}

.helpcontainer.helpopen .pagehelpcontent ul {
    list-style: square;
    margin: 0;
}

.helpcontainer.helpopen .pagehelpcontent li {
    font-size: 14px;
    line-height: 28px;    
}

@media print {
    .noprint {
        display: none;
    }
}

.shortcutpanel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 800px;
    padding: 16px;
}

    .shortcutpanel .shortcutitem {
        padding: 16px;
        background-color: #065986;
        border-radius: 6px;
    }

        .shortcutpanel .shortcutitem a, .shortcutpanel .shortcutitem a:visited, .shortcutpanel .shortcutitem a:hover {
            color: white;
            text-decoration: none;
        }

            .shortcutpanel .shortcutitem:hover {
                background-color: #126e9f;
                cursor: pointer;
        }

.text-danger__darkmode {
    color: whitesmoke !important;
}

a.text-danger__darkmode:hover, a.text-danger__darkmode:focus {
    color: whitesmoke !important;
}

.tabcontainertop {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 950px;
    min-width: fit-content;
    margin-top: 16px;
    margin-left: 24px;
    margin-right: 24px;
    border-bottom: solid 1px #b9b9b9;
    box-shadow: 4px 4px 12px -4px #cdcdcd;
}

.tabbutton {
    background-color: #dddddd;    
    border: solid 1px #c7c7c7;
    margin: 0 4px;
}

.tabbutton.active {
    background-color: #7db2d1;    
}

    .tabbutton a, .tabbutton label {
        display: block;
        padding: 12px 16px;
        color: black;
        text-decoration: none;
    }

        .tabbutton a:hover, .tabbutton a:visited {
            color: black;
            text-decoration: none;
    }