/* about panel */ 
.closePanel {
    margin-left: 0px; 
    float: left; 
}

/* accordions */ 
.accordionButton {
    padding: 5px; 
    margin-bottom: 6px; 
}

.accordionButton:hover {
    cursor: pointer;
}

.accordionButton:after {
    content :"";
    display: block;
    width: 100%; 
    height: 1px;
    background: #edebe9;
    margin-top: 5px; 
}

.accordionContainer {
    padding-left: 30px; 
}

/* body */ 
body {
    background-color: white;
}
/* buttons */ 
.bottomButton {
    margin-bottom: 6px;
}

#googleSpan {
    line-height: 25px;
}

.primaryButton {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    border: solid; 
    border-color: #0078d4;
    background-color: #0078d4;
    border-width: 1px; 
    padding: 4px 20px 5px 20px;
    color: white;
    display: block; 
    margin-bottom: 5px; 
    margin-top: 5px; 
}

.primaryButton:hover:not([disabled]) {
    background-color: #106ebe;
    cursor: pointer; 
}

.primaryButton:active:not([disabled]) {
    background-color: #005a9e;
}

.primaryButton[disabled], .standardButton[disabled] {
    background-color: #f3f2f1;
    border-color: #f3f2f1;
    color: #a19f9d;
}

.standardButton {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    border: solid; 
    border-color: #8a8886;
    background-color: #ffffff;
    color: #323130;
    border-width: 1px; 
    padding: 4px 20px 5px 20px;
    display: block; 
    margin-bottom: 5px;  
    margin-top: 5px; 
}

.standardButton:hover:not([disabled]) {
    background-color: #f3f2f1;
    border-color: #8a8886;
    cursor: pointer; 
}

.standardButton:active:not([disabled]) {
    background-color: #edebe9
}

.topVerticalButton {
    margin-top: 0px;
}

.verticalButton {
    margin-top: 6px;
}

/* color picker */ 
.actionContainer {
    float: right; 
    margin-top: 8px;
    margin-right: 5px; 
}

.colorPickerWrapper {
    width: 32px; 
    height: 24px; 

    /* place at end of span */ 
    float: right; 
}

.colorPickerWrapper:hover {
    cursor: pointer; 
    background-color: lightgray;
}

.fillColorIndicator {
    position: relative; 
    width: 13px; 
    height: 13px; 
    float: left; 
    left: 5px; 
    top: 5px; 
}

.footnoteItem {
    float: left;
    margin-top: 9px; 
}

.ms-Icon--ChevronDownSmall {
    position: relative; 
    float: right;
    top: 9px; 
    right: 3px;
    font-size: 7px; 
}

.ms-Icon--Hide,.ms-Icon--RedEye {
    margin-right: 10px; 
    margin-top: 2px; 
    color: #a19f9d;
    font-size: 20px;
}

.ms-Icon--Hide,.ms-Icon--RedEye:hover {
    cursor: pointer; 
    color: #8a8886
}

.ms-Icon--SeeDo {
    margin-top: 4px;
}

.superscriptListItem {
    height: 38px; 
    border-bottom: 2px solid #edebe9;
    text-indent: 10px;
    margin-right: 60px;
}

.superscriptListItem:hover {
    cursor: pointer; 
    background-color: #f3f2f1;
}


/* containers */ 
.anchorBottom {
    position: absolute; 
    bottom: -10px; 
    padding: 5px;
    background-color: white;
}
.containerBox {/* will be deprecated */ 
    margin-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
} 

/* dimension modification */ 
.width100 {
    width: 100%; 
}

/* dropzones */ 

.drop_zone {
    border: 2px dashed #bbb;
    /* -moz-border-radius: 5px; */
    /* -webkit-border-radius: 5px; */
    /* border-radius: 5px; */ /* Marker: Taking this out for now*/
    padding: 25px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
    color: #bbb;
    margin-top: 0px;
    margin-bottom: 6px;
}

.fail_drop_zone {
    border: 2px solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-color: salmon;
    padding: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: salmon;
    color: white;
}

.success_drop_zone {
    border: 2px solid;
    border-color: #dff6dd;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: #dff6dd;
    color: black;
}

/* element positioning */ 
.blankSpace25 {
    margin-bottom: 25px;
}

.blankSpace50 {
    margin-bottom: 50px; 
}

.center {
    display: block; 
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
}

.centeredRow {
    min-width: 250px; 
    width: 50%;
    margin-left: auto; 
    margin-right: auto; 
}

.floatLeft {
    float: left; 
}

/* hamburger menu */ 

.hamburgerContainer {
    margin-bottom: 10px; 
}

#hamburgerIcon {
    padding: 10px;
    z-index: 20;
    text-decoration: none;
    color: #323130; 
}

#hamburgerIcon:hover {
    cursor: pointer;
    color: #0078d4;
}

#hamburgerIcon:hover {
    cursor: pointer;
    
}

#hamburgerMenu {
    display: none;
    position: absolute; 
    z-index: 10;
    background-color: white;
    width: 150px;
    border-color: #eeeeee;
    border-width: 1px;
    border-style: solid;
    box-shadow: #605e5c 0px 0px 5px 0px;
}

.iconTitlePair {
    display: grid;
    grid-template-columns: 50px auto;
    align-items: center; 
    overflow: visible; 
}

.padLeftIcon {
    padding-left: 10px;
}

.stackedMenuTiles {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center; 
    line-height: 35px; 
    text-decoration: none; 
    color: #323130;
}

.stackedMenuTiles:hover { 
    background-color: #f3f2f1;
    color: #0078d4;
}

.stackedMenuTiles:active {
    background-color: #f3f2f1;
    color: #323130; 
}

.stackedMenuTilesTitle {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center; 
    line-height: 35px; 
    text-decoration: none; 
    color: #323130;
}

/* iconography */ 
.ms-Icon--Delete {
    float: right; 
}

.ms-Icon--Delete:hover {
    cursor: pointer; 
}

.marginLeft5 {
    margin-left: 5px;
}

/* separator lines */ 
hr {
    margin-top: 12px;
    margin-bottom: 12px;
    border-color: #cccccc;
    background-color: #cccccc;
    border-style: solid;
    border-width: 1px;
   
}

.text-divider {
    display: flex;
    align-items: center;  
    --text-divider-gap: 1rem;
}
  
.text-divider::before,
.text-divider::after {
    content: '';
    border-color: gray;
    background-color: gray;
    border-width: 1px;
    height: 1px; 
    flex-grow: 1;  
}

.text-divider::before {
    margin-right: var(--text-divider-gap);
}
  
.text-divider::after {
    margin-left: var(--text-divider-gap);
}

/* text fields*/ 

.textField {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: solid; 
    border-color: #605e5c;
    color: #323130;
    border-width: 1px; 
    padding: 5px;
    margin-bottom: 16px; 
    width: 80%;
}

.textField:focus:not([disabled]) {
    outline-color: #0078d4;
    outline-style: solid; 
    outline-width: 3px; 
    border-radius: 0; 
    border-color: white; 
    outline-offset: -3px; 
}

.textField[disabled] {
    background-color: #f3f2f1;
    border-color: #f3f2f1;
    color: #a19f9d;
}

.textFieldLabel {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: black;
}

.textField, .textFieldLabel {
    display: flex; 
    flex-direction: column;
}

/* toggles */ 
/* override fabric.comp for their ridiculous margin bottom setting */ 
.ms-Toggle.ms-Toggle--textLeft {
    margin-bottom: 10px; 
}

.toggleRow { /* will be deprecated */ 
    margin-right: 6px;
    margin-bottom: 6px;
    justify-content: space-between; 
    display: inline;
    float: left;
}

/* typography */ 
.disabledLink, .disabledLink:hover {
    color: #a19f9d;
    cursor: default; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

.errorMessage {
    color: red;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

.largeLinkText {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    position: relative;
    bottom: 0px;
    text-align: left; 
    color: cornflowerblue; 
    text-decoration: none; 
}

.largeLinkText:hover {
    cursor: pointer; 
    color: #0078d4;
}

p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 6px;
    font-size: 13px;
    margin-bottom: 6px;
}

.segoe13 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
}

.segoe13Bold {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
}

.segoe14 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

.segoe14Bold {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

.segoe16 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

.segoe16Bold {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

.segoe18 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
}

.segoe18Bold {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
}

.segoe24 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
}

.smallLinkText {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
    position: relative;
    bottom: 0px;
    text-align: left; 
    color: black; 
    text-decoration: none; 
}

.smallLinkText:hover {
    cursor: pointer; 
    color: #0078d4;
}

.tooltitle {
    font-family: 'Segoe UI Semibold', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    color: #323130;
    transform: translateY(-3px);
}