/*
* Created By: MDC Web Services
* Description: Site stylesheet 
* Revised: 10/26/2017
*/


/*FOR DEMO PURPOSES ONLY - Do not publish to productions*/


/*Font Icons*/

.font-test {
    font-size: 128px;
    color: #555E72;
}


.sticky {
    position: fixed;
    top: 20;
}

.sig {
    font-family: 'Alex Brush', cursive;
    font-weight: normal;
}

.headermessage {
    margin: 19px;
    color: black;
    font-size: 16px;
    font-weight: bold;
}



/*Modals w/ copy button*/

pre {
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
}

pre .copy-btn {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 0 0 4px;
    color: #31708f;
    background-color: #d9edf7;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #bce8f1;
}

pre .copy-btn:hover {
    border-color: #7dbfcd;
    background-color: #b6dbee;
    color: #0f4763;
}

.code-preview {
    display: block;
    padding: 9.5px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
}

.code-preview+pre {
    border-radius: 0 0 4px 4px;
    border-top: none;
}

.code-preview-title {
    color: #777;
}

.headermessage {
    margin: 19px;
    color: black;
    font-size: 16px;
    font-weight: bold;
}



/*.copy-tooltip {
position: absolute;
right: 0;
top: 4.5em;
}*/


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

[tooltip] {
    /*margin:20px 60px;
  position:relative;
  display:inline-block;*/
}

[tooltip]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    z-index: 99;
    opacity: 0;
}

[tooltip-position='left']::before {
    left: 0%;
    top: 50%;
    margin-left: -12px;
    transform: translatey(-50%) rotate(-90deg)
}

[tooltip-position='top']::before {
    left: 50%;
}

[tooltip-position='buttom']::before {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip-position='right']::before {
    left: 100%;
    top: 50%;
    margin-left: 1px;
    transform: translatey(-50%) rotate(90deg)
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: #fff;
    padding: 4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index: 99;
    opacity: 0;
}

[tooltip-position='left']::after {
    left: 0%;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
}

[tooltip-position='top']::after {
    left: 50%;
}

[tooltip-position='buttom']::after {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(0%);
}

[tooltip-position='right']::after {
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateX(0%) translateY(-50%);
}

[tooltip]:active::after,
[tooltip]:active::before {
    opacity: 1
}



/*[tooltip]:hover::after,[tooltip]:hover::before {
   opacity:1
}*/


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

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}



/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#flash-alert,
#demo-flash-alert {
    display: none;
}


@media (min-width: 768px) {}

@media (max-width: 767px) {}




/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {}

@media (min-width: 768px) and (max-width: 991px) {}




/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199px) {}




/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {}


@media (max-width: 991px) {}

@media (min-width: 992px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 1200px) {}