:root {
    --theme-base-color: #662d91;
    --theme-color-2: #662D91;
    --theme-color-3: #91342D;
    --theme-color-4: #58912D;
    --theme-color-5: #2D8A91;
}

html {
    overflow-y: scroll;
}

body {
    background: #fff;
    font-size: 9pt;
    font-family: Segoe UI, Georgia;
    color: rgb(83,71,65);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

p {
    margin: 10px 0 10px 0;
}

.arabic {
    direction: rtl;
    text-align: left;
}

header {
    display: flex;
    gap: 9px;
    flex-direction: row;
    line-height: 1.5em;
    padding: 5px;
    padding: 0px;
    color: white;
    background-color: var(--theme-base-color);
    font-size: 13pt;
}

    header div {
        padding: 4px
    }

        header div#logo-cell {
        }

        header div#logo {
            padding: 5px;
        }

    header .logo-image {
        height: auto;
        vertical-align: middle;
    }

    header div#title-cell {
        padding: 2px;
        vertical-align: middle;
    }

        header div#title-cell p {
            padding: 2px;
            margin: 2px;
        }

            header div#title-cell p.arabic {
            }

/* ---------------------------- */

span.no {
    color: red;
}

span.na {
    color: darkorange;
}

span.yes {
    color: green;
}

/* ---------------------------- */

nav {
    margin: 0;
    padding: 0 0 0 0px;
    /*color: white;*/
    /*background-image: url('image/bg-line-darkbrown.png');*/
}

main {
    vertical-align: top;
    margin: 0;
    padding: 0 2px 0 8px;
}

    main .arabic {
        line-height: 1.5em;
        direction: rtl;
        text-align: right;
        margin-right: 5px;
    }

main {
    line-height: 1.5em;
}

    main span.site-map-path {
        display: block;
        margin: 7px 0 7px 0;
    }

    main img#office-photo {
        float: left;
        max-width: 40%;
        min-width: 380px;
        height: auto;
        margin: 5px;
    }

address {
    display: flex;
    line-height: 1.5em;
}

    address .arabic {
        line-height: 1.5em;
        text-align: left;
    }


h1, h2, h3 {
    font-weight: bold;
    font-size: inherit;
}

    h1 > a, h2 > a, h3 > a {
        font-size: inherit;
    }

ul li, ol li {
    list-style-type: circle;
    line-height: 1.5em;
}

aside {
    vertical-align: top;
    margin: 0;
    padding: 0 2px 0 8px;
}

sup.mandatory-field {
    color: red;
    vertical-align: super;
}

/* ---------------------------- */

footer {
    color: white;
    background-color: var(--theme-base-color);
    margin: 0;
    padding: 5px;
}

    footer a:link {
        color: yellow;
        text-decoration: none;
    }

    footer a:visited {
        color: yellow;
        text-decoration: none;
    }

    footer a:hover {
        color: lightyellow;
        text-decoration: none;
    }

/* ---------------------------- */

a {
    text-decoration: none;
}

    a:link {
        color: blue;
    }

    a:visited {
        color: blue;
    }

    a:hover {
        color: red;
    }

.error, .no {
    color: red;
}

.warning, .na {
    color: darkorange;
}

.success, .yes {
    color: green;
}

.report {
    color: blue;
}

/* ---------------------------- */
/* chart */

canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* ---------------------------- */

table.gridview {
    border: none #e7e7ff 0px;
}

    table.gridview th, table.gridview td {
        padding: 4px;
        margin: 1px;
    }

    table.gridview caption {
        margin-left: -4px;
        padding: 5px;
        vertical-align: top;
        text-align: left;
        font-weight: 600;
    }

    table.gridview .header-style th {
        color: white;
        background-color: var(--theme-base-color);
        text-align: center;
        font-weight: normal;
    }

    table.gridview .row-style {
        background-color: white;
    }

    table.gridview .alternating-row-style {
        background-color: ghostwhite;
    }

    table.gridview .selected-row-style {
        background-color: lightpink;
    }

    table.gridview .edit-row-style {
        background-color: whitesmoke;
    }

    table.gridview .pager-style {
        color: white;
        background-color: #aaaadd;
    }

    table.gridview .footer-style {
        color: #4a3c8c;
        background-color: #b5c7de;
    }

    table.gridview td img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    table.gridview td a {
        display: block;
        text-align: center;
    }

/* ---------------------------- */

table.yellowPaperFormGridview {
    border: solid red 5px;
    margin-top: 15px;
}

/*

<%-- Used in Migration --%>
<asp:GridView SkinID="yellowPaperForm" CssClass="gridview" CellPadding="3" BorderColor="LightGray" runat="server">
<HeaderStyle ForeColor="#ff0000" BackColor="#ffffcc" Font-Bold="false" HorizontalAlign="Center" />
<SelectedRowStyle ForeColor="Red" BackColor="#B5C7DE" HorizontalAlign="Center"/>
<RowStyle CssClass="row-style" />
<AlternatingRowStyle CssClass="alternating-row-style" />
</asp:GridView>

*/

/* ---------------------------- */
/* mail */

table.mail {
    border: 0px solid green;
    padding: 0px;
    margin-left: -4px;
}

    table.mail td {
        border: 0px solid red;
        padding: 2px;
        margin: 0;
        vertical-align: top;
    }

    table.mail tr td:first-child {
        width: 100px;
    }

/* ---------------------------- */

div#network-design-document-structure {
}

    div#network-design-document-structure table {
        border: solid gray 0px;
    }

        div#network-design-document-structure table tr td {
            border: solid red 0px;
            padding: 3px;
            margin: 3px;
            /*text-align: center;*/
            vertical-align: top;
        }

    div#network-design-document-structure tr.site0 {
        background-color: RosyBrown;
    }

        div#network-design-document-structure tr.site0 td {
            color: white;
        }


    div#network-design-document-structure tr.site1 {
        background-color: rgba(248, 4, 4, 0.2);
    }

    div#network-design-document-structure tr.site2 {
        background: rgba(224, 195, 20, 0.2);
    }

    div#network-design-document-structure tr.site3 {
        background: rgba(51, 183, 19, 0.2);
    }

    div#network-design-document-structure tr.site4 {
        background: rgba(29, 200, 179, 0.2);
    }

    div#network-design-document-structure tr.site5 {
        background: rgba(22, 21, 114, 0.2);
    }

    div#network-design-document-structure tr.site6 {
        background: rgba(67, 6, 95, 0.2);
    }

    div#network-design-document-structure tr.site7 {
        background: rgba(128, 6, 6, 0.2);
    }

    div#network-design-document-structure tr.site8 {
        background: rgba(86, 126, 35, 0.2);
    }

    div#network-design-document-structure tr.site9 {
        background: rgba(29, 200, 179, 0.2);
    }

    div#network-design-document-structure tr.site10 {
        background: rgba(22, 21, 114, 0.2);
    }

    div#network-design-document-structure tr.site11 {
        background: rgba(67, 6, 95, 0.2);
    }

    div#network-design-document-structure tr.site12 {
        background: rgba(224, 195, 20, 0.2);
    }

    div#network-design-document-structure tr.site13 {
        background: rgba(255, 192, 203, 0.2);
    }

    div#network-design-document-structure tr.site14 {
        background: rgba(216,191,216, 0.2);
    }

    div#network-design-document-structure tr.site15 {
        background: rgba(255, 0, 110, 0.2);
    }

    div#network-design-document-structure tr.site16 {
        background-color: rgba(248, 4, 4, 0.2);
    }

    div#network-design-document-structure tr.site17 {
        background: rgba(224, 195, 20, 0.2);
    }

    div#network-design-document-structure tr.site18 {
        background: rgba(51, 183, 19, 0.2);
    }

    /*
    div#network-design-document-structure td.site {
        background: rgba(216,191,216,0.1);
    }

    div#network-design-document-structure td.router {
        background: rgba(255,0,0,0.1);
    }

    div#network-design-document-structure td.odf {
        background: rgba(255,0,0,0.1);
    }

    div#network-design-document-structure td.olt {
        background: rgba(255,0,0,0.1);
    }
        */

    div#network-design-document-structure td.pon {
    }

    div#network-design-document-structure span.head {
        display: block;
        font-weight: normal;
        color: darkgreen;
        padding-bottom: 5px;
    }

    div#network-design-document-structure span.staff {
        font-weight: normal;
    }

        div#network-design-document-structure span.staff::after {
            content: ", ";
        }

/* ---------------------------- */

div#framework-structure {
}

    div#framework-structure table {
        border: solid lightgray 1px;
        background-color: whitesmoke;
    }

    div#framework-structure td.company,
    div#framework-structure td.sector,
    div#framework-structure td.department,
    div#framework-structure td.division,
    div#framework-structure td.section,
    div#framework-structure td.supplier {
        font-weight: normal;
        border-left: solid lightgray 1px;
        border-top: solid lightgray 1px;
    }

    div#framework-structure table tr td {
        border: solid lightgray 1px;
        padding: 6px;
        margin: 6px;
        /*text-align: center;*/
        vertical-align: top;
    }

    /*
    div#framework-structure tr.company1 {
        background-color: rgba(248, 4, 4, 0.2);
    }

    div#framework-structure tr.company2 {
        background: rgba(224, 195, 20, 0.2);
    }

    div#framework-structure tr.company3 {
        background: rgba(51, 183, 19, 0.2);
    }


    div#framework-structure tr.sector1 {
        background: rgba(29, 200, 179, 0.2);
    }

    div#framework-structure tr.sector5 {
        background: rgba(22, 21, 114, 0.2);
    }

    div#framework-structure tr.sector6 {
        background: rgba(67, 6, 95, 0.2);
    }

    div#framework-structure tr.sector7 {
        background: rgba(128, 6, 6, 0.2);
    }

    div#framework-structure tr.sector8 {
        background: rgba(86, 126, 35, 0.2);
    }

    div#framework-structure tr.sector9 {
        background: rgba(29, 200, 179, 0.2);
    }

    div#framework-structure tr.sector10 {
        background: rgba(22, 21, 114, 0.2);
    }

    div#framework-structure tr.sector11 {
        background: rgba(67, 6, 95, 0.2);
    }

    div#framework-structure tr.sector12 {
        background: rgba(224, 195, 20, 0.2);
    }

    div#framework-structure tr.sector13 {
        background: rgba(255, 192, 203, 0.2);
    }

    div#framework-structure tr.sector14 {
        background: rgba(216,191,216, 0.2);
    }

    div#framework-structure tr.sector15 {
        background: rgba(255, 0, 110, 0.2);
    }


    div#framework-structure td.company {
        background: rgba(248, 4, 4, 0.2);
    }

    div#framework-structure td.sector {
        background: rgba(224, 195, 20, 0.2);
    }

    div#framework-structure td.department {
        background: rgba(51, 183, 19, 0.2);
    }

    div#framework-structure td.division {
        background: rgba(67, 6, 95, 0.2);
    }

    div#framework-structure td.section {
        background: rgba(86, 126, 35, 0.2);
    }
*/

    div#framework-structure td.pon {
    }

    div#framework-structure span.head {
        display: block;
        font-weight: normal;
        color: darkgreen;
        padding-bottom: 5px;
    }

    div#framework-structure span.staff {
        font-weight: normal;
    }

        div#framework-structure span.staff::after {
            content: ", ";
        }

/* ---------------------------- */

div.treeview td {
    padding: 0px;
    margin: 0px;
}

div.treeview inquery {
    color: red;
}

div.treeview response {
    color: red;
}

div.treeview link {
    color: green;
}

div.treeview selection {
    color: red;
}

/* ---------------------------- */

.copper-brown {
    color: #b87333;
}

.fiber-blue {
    color: #0198ff;
}

.mixed-gray {
    color: #808080;
}

/* ---------------------------- */

.service-port-location-note table {
    background-color: white;
    border: solid 1px teal;
    padding: 3px;
    margin: 3px;
    border-spacing: 2px;
    border-color: LightGrey;
    border-collapse: collapse;
}

    .service-port-location-note table td {
        text-align: center;
        padding: 5px;
        border: 1px solid lightgrey;
    }

/* ---------------------------- */

div.miscellaneous-data-tables dd {
    margin-left: 0px;
}

/* ---------------------------- */

div.report-note {
    display: inline-block;
    background-color: ghostwhite;
}

    div.report-note dd {
        margin-left: 0px;
    }

    div.report-note dl {
        padding: 0px;
    }

    div.report-note li {
        padding: 0px;
    }

        div.report-note li:first-child {
            color: red;
            padding: 0px;
        }