/*
 * Basic elements
 */

*{margin:0px; padding:0px; font-family:"Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif; font-size:12px; color:#333; cursor:default; -webkit-user-select: none; -webkit-box-sizing: border-box;}


h1, h2, h3{font-family:"Century Gothic","Trebuchet MS",sans-serif; font-weight:600; font-size:1.7em; color:#555; margin-bottom:15px; padding-bottom:2px; border-bottom:1px solid #eee;}
h1 a, h2 a, h3 a{text-decoration:none !important;}
h2{margin:16px 0 12px 0; font-size:1.3em; border-bottom:0px;}
h3{margin:10px 0 7px 0; font-size:1.1em; border-bottom:0px;}

a, a *{cursor:pointer;}
p{margin:0 0 10px 0;}

span.loading{
    margin-top:150px; display:block;
    padding:110px 0 0 0;
    font-size:28px;
    font-weight:bold;
    text-align: center;
    width:100%;
    line-height: 40px;
    color:#888;
    position: relative;
}

span.loading::before {
    content: '';
    background:url(/core/icons/loader_logo.png) no-repeat top center;
    background-size: 75px 75px;
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    left: calc(50% - 57px);
    top: 0;
    animation: waveIconPulse 1.83s .4s infinite;
}

span.loading::after {
    content: '';
    background:url(/core/icons/loading_animation.gif) no-repeat top center;
    background-size: 150px 150px;
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    left: calc(50% - 82px);
    top: -41px;
}

@keyframes waveIconPulse{0%{transform:scaleZ(1)}30%{transform:scale3d(1.1,1.1,1.1)}60%{transform:scale3d(1.1,1.1,1.1)}to{transform:scaleZ(1)}}

span.default-placeholder-round{background:#ddd; display:block; margin:auto; top:50%; position:relative; width:200px; height:200px; border-radius:100px; text-align: center; padding:20px; -webkit-transform: translate(0, -50%);}
span.default-placeholder-round span{color:white; display:block; font-size:26px; font-weight:bold; text-align: center; vertical-align: middle; position:relative; top:50%; -webkit-transform: translate(0, -50%)}
span.note{display:block; padding:3px 0; font-size:10px;}
span.note:before{content:'NOTE:'; padding-right:6px; font-weight:bold; font-size:10px;}
span.prefix{display:inline-block; padding-right:5px; font-size:11px; color:#777;}
span.suffix{display:inline-block; padding-left:5px; font-size:11px; color:#777;}
span.clickable-text{color: #257ddc; font-weight: bold; cursor: pointer;}

.align-left{float:left;}
.align-right{float:right;}
.clear{clear:both;}

.w50{width:50px;}
.w100{width:100px;}
.w150{width:150px;}
.w200{width:200px;}
.w250{width:250px;}
.w300{width:300px;}
.w350{width:350px;}
.w400{width:400px;}
.w450{width:450px;}
.w500{width:500px;}
.w100pc{width:100% !important;}

.margin-h10{margin:0 10px;}
.margin-r10{margin:0 10px 0 0;}

/* messages, alerts, warnings and errors */
div.message, p.message{color:#555; border-radius:5px; font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; padding:10px 10px 10px 36px; margin:10px; border:1px solid #8ed9f6; background:#e3f7fc url(images/notice.png) no-repeat 10px 50%;}
div.message span.bold, p.message span.bold{font-weight:bold; text-transform:uppercase;}
div.message.error, p.message.error{background:#ffecec url('images/error.png') no-repeat 10px 50%; border:1px solid #f5aca6;}
div.message.success, p.message.success{background:#e9ffd9 url('images/success.png') no-repeat 10px 50%; border:1px solid #a6ca8a;}
div.message.warning, p.message.warning{background:#fff8c4 url('images/warning.png') no-repeat 10px 50%; border:1px solid #f2c779;}
div.message a.retry{display:inline-block; padding-left:10px; color:#820000; text-decoration: underline;}

div.message, p.message{border-radius: 0; border-width: 1px 0 2px 0 !important; margin: 10px 0 15px 0; font-size: 13px; background-image:none !important; position: relative; padding-left: 45px; color: #574900; background-color: #FFFF7E; border-color: #EBEB00;}
div.message:before, p.message:before{content: "\f129"; display: inline-block; font: normal normal normal 20px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); position: absolute; left: 20px; top: 8px; line-height: 100%; color: #918005;}

div.message.warning, p.message.warning{color: #503400; border-color: orange; background-color: #FFE88C;}
div.message.warning:before, p.message.warning:before{content: "\f12a"; color: #503400;}

div.message.error, p.message.error{color: #6F0000; border-color: #E25353; background-color: #FFE0E0;}
div.message.error:before, p.message.error:before{content: "\f12a"; color: #AC0000;}

div.message.success, p.message.success{color: #043800; border-color: #33A000; background-color: #D1FFB3;}
div.message.success:before, p.message.success:before{content: "\f00c"; color: #068A00;}

div.message hr {width: 200px; margin: 20px auto; opacity: 0.5;}

/* Buttons - http://www.bestcssbuttongenerator.com (Twitter button) */
button, a.button {box-shadow: 0px 1px 0px 0px #f0f7fa; background:-webkit-linear-gradient(top, #65ABF7 5%, #1E509B 100%); border-radius:4px; border:1px solid #014169; display:inline-block; cursor:pointer; color:#ffffff; font-weight:500; padding:4px 15px 2px; text-decoration:none;}
button i.fa, a.button i.fa{color: white; font-size: 14px; margin-right: 8px; position:relative; top:1px; -webkit-transition:300ms all; cursor: pointer;}
button:hover, a.button:hover {background:-webkit-linear-gradient(top, #1E509B 5%, #4480C0 100%);}
button:active, a.button:active{position:relative; top:1px; }

button.subtle, a.button.subtle { -webkit-box-shadow: 0px 1px 0px 0px #c2c2c2; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e3e3e3), color-stop(1, #b0b0b0)); background:-webkit-linear-gradient(top, #e3e3e3 5%, #b0b0b0 100%); background-color:#e3e3e3; border:1px solid #696969; color:#525252;}
button.subtle:hover, a.button.subtle:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b0b0b0), color-stop(1, #e3e3e3)); background:-webkit-linear-gradient(top, #b0b0b0 5%, #e3e3e3 100%); background-color:#b0b0b0; }

button.red, a.button.red {
    background-color: #ff574f;
    border-color: #da3f3f;
}
button.red:hover, a.button.red:hover {
    border-color: #ca1a1a;
    background-color: #ff3e34;
}
button.green, a.button.green {
    background-color: #49d15d;
    border-color: #3fc553;
}
button.green:hover, a.button.green:hover {
    background-color: #5de070;
    border-color: #3fc553;
}

button.no-icon-margin i.fa, button i.fa.no-icon-margin, a.button.no-icon-margin i.fa, a.button i.fa.no-icon-margin{margin-right:0px;}

div.buttons{text-align:right; padding-top:20px;}
a.clickable-icon{display: inline-block; margin: 0 2px; width: 16px; height: 16px; vertical-align: middle; background-repeat: no-repeat; cursor: pointer;}

    body.is-local nav:after,
    body.is-dev nav:after {
        position: absolute;
        right: 10px;
        top: 21px;
        display: inline-block;
        padding: 2px 7px 0;
        color: white;
        border-width: 0 1px 1px 0;
        border-radius: 3px;
    }

    body.is-local nav:after {
        content: attr(data-local-db);
        border: 1px solid rgba(0, 191, 255, 0.64);
        background: deepskyblue;
    }

    body.is-dev nav:after {
        content: attr(data-dev-db);
        border: 1px solid #d60000;
        background: red;
    }

    body.is-dev nav{border-color:#bb2b2b;}
    body.is-local nav{border-color:rgba(0, 191, 255, 0.64);}

    /* Modal windows */
    .modal-overlay{position:absolute; top:0px; left:0px; bottom:0px; right:0px; display:table; width:100%; height:100%; background:rgba(255, 255, 255, 0.8); z-index:1101;}
    .modal-overlay-inner{display:table-cell; vertical-align:middle;}

    .modal-window{z-index:1102; background-color:#ffffff; border:1px solid #cccccc; padding:15px; margin:auto; position:relative; box-shadow: 5px 5px 5px #bbb;}
    .modal-content-wrapper{overflow:hidden;}
    .scroll .modal-buttons {margin-top: 10px;}
    .scroll .modal-content-wrapper{overflow-y:scroll !important; padding: 10px; margin: -10px;}
    .overflow .modal-content-wrapper{overflow:visible;}
    .modal-content{border:1px solid #6593CF; padding:10px; background:#fff; position:relative;}

    .modal-cancel{margin-left:10px;}
    .modal-title{padding:4px 20px 4px 15px;}
    .modal-close{position:absolute; top:-1px; right:15px; display:block; background:#FF0000; color:#fff; text-align:center; font-weight:bold; opacity:0.5; padding:3px 10px 3px 10px;}
    .modal-close:hover{opacity:0.7;}

    .modal-buttons{background:#f3f3f3; border-top:1px solid #eaeaea; text-align:right; margin:15px -10px -10px -10px; padding:0px 15px;}
    .modal-buttons .button, .modal-buttons button{display:inline-block; margin:7px 0 7px 7px;}

    .modal-content p{vertical-align: top;}

    .modal-prompt-overlay, .modal-confirm-overlay{z-index:1111;}
    .modal-prompt-window, .modal-confirm-window{z-index:1112;}

    .modal-tabs {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-bottom:1px solid #ccc;
        background: linear-gradient(0deg, rgb(224, 224, 224) 0%, rgb(243, 243, 243) 100%);
    }

    .modal-tabs a {
        min-height: 30px;
        display: inline-block;
        padding: 10px 15px 8px;
        border-right:1px solid #d1d8e2;
        border-left:1px solid #f3f3f3;
        color:#1d3c65;
    }
    .modal-tabs a.active, .modal-tabs a:hover{
        border-left:1px solid #b4b8ba;
        background: linear-gradient(0deg, rgb(178, 181, 183) 0%, rgb(214, 220, 226) 100%);
    }
    .modal-window .modal-content.has-tabs{
        padding-top:50px;
    }

    /* what's this? consolidate */
    .modal-window{background-color:#E3EFFF; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c7e1ff),color-stop(1, #82a4cd)); border:1px solid #9fc5f3; padding:3px;}

    /* Modal windows: print mode (not verified) */
    .print-hide{display:none !important;}
    body.print-mode{background:white !important; min-height:0px !important; height:auto !important;}
    .modal-overlay.print-mode{position:static; top:0; left:0; border:0px solid white !important; background:white !important; padding:0px; margin:0px !important;}
    .modal-overlay.print-mode .modal-buttons, .modal-overlay.print-mode .modal-close{display:none !important;}
    .modal-overlay.print-mode .modal-content-wrapper{overflow:visible; overflow-x:visible; height:auto !important; max-height:none !important; border:0px solid white !important;}
    .modal-overlay.print-mode .modal-window,
    .modal-overlay.print-mode .modal-overlay-inner,
    .modal-overlay.print-mode .modal-content-wrapper,
    .modal-overlay.print-mode .modal-content{display:block !important; height:auto !important; min-height:none !important; top:auto !important; left:auto !important; right:auto !important; bottom: auto !important; vertical-align:top !important; border:0px solid white !important; box-shadow:none !important; padding:0px; position:static !important; background:white !important;}
    .modal-overlay.print-mode .modal-title{font-size:200% !important; padding:0 0 0 0 !important; margin:0 0 40px 0 !important; }

    .modal-overlay.enable-background-actions{display:block; background:none; width:auto; height:auto;}

    /* TinyColorPicker jQuery library */
    .jQueryColorPicker{width: 30px; height: 30px; position: relative; clear: both;  }
    .jQueryColorPicker .track{background: #EFEFEF url(images/tinycolorpicker.png) no-repeat 50% 50%; box-sizing:content-box; -webkit-box-sizing: content-box; height: 150px; width: 150px; padding: 10px; position: absolute; cursor: crosshair; float: left; left: -71px; top: -71px; display: none; border: 1px solid #ccc; z-index: 10; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px; }
    .jQueryColorPicker .color{width: 25px; height: 25px; box-sizing:content-box; -webkit-box-sizing: content-box; padding: 1px; border: 1px solid #ccc; display: block; position: relative; z-index: 11; background-color: #EFEFEF; -webkit-border-radius: 27px; -moz-border-radius: 27px; border-radius: 27px; cursor: pointer; }
    .jQueryColorPicker .colorInner{width: 25px; height: 25px; -webkit-border-radius: 27px; -moz-border-radius: 27px; border-radius: 27px; }
    .jQueryColorPicker .dropdown{list-style: none; display: none; width: 27px; position: absolute; top: 28px; border: 1px solid #ccc; left: 0; z-index: 1000; }
    .jQueryColorPicker .dropdown li{height: 25px; cursor: pointer; }



    /* Material design - floating buttons */
    .mt-floating-button-wrapper{position:absolute; bottom:50px; right:50px; z-index: 100;}
    .mt-floating-button-wrapper a{-webkit-transition:all 300ms; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); overflow:hidden; display:inline-block; width:60px; height:60px; margin-left:1px; border-radius:30px; line-height: 60px; text-align: center; background: #ff514f; position: relative;}
    .mt-floating-button-wrapper a .fa{position:absolute; left:0; display:block; width:60px; height:60px; line-height: 60px; font-size:130%; cursor:pointer; color:white;}
    .mt-floating-button-wrapper a .label{position:absolute; left:-200px; font-size:18px; -webkit-transition:left 300ms; display:block; width:300px; text-align: left; cursor:pointer; color:white;}
    .mt-floating-button-wrapper a:hover{width:300px; background: #da4544;}
    .mt-floating-button-wrapper a:hover .label{left:60px;}

    /* Material design - normal buttons */
    .mt-round-button{display: inline-block; width: 24px; height: 24px; background: #E2351E; border-radius: 12px; line-height: 24px !important; font-size: 16px !important; text-align: center; color: white; -webkit-transition:200ms all;}
    .mt-round-button:hover{font-size: 22px !important; background: white; color: #E2351E;}

    .mt-round-button-cell{vertical-align: middle; padding-top:0px !important; padding-bottom:0px !important;}

    table .mt-round-button{color:#EF9A9A; background:transparent;}
    table .mt-round-button:hover{color:#C62828; background:transparent; font-size:16px !important;}

    /* Material design - table list TODO: style this properly */
    .mt-table-list{width:100%;}
    .mt-table-list td{border-bottom: 1px solid #EBEBEB; color: #555; padding: 12px 10px;}
    .mt-table-list td:first-child{font-weight: bold; color: #222;}
    .mt-table-list tr:last-child td{border-bottom:0px solid white;}
    .mt-table-list td.action{text-align: center; vertical-align: middle; padding: 0 0 0 0; width:30px;}

    .mt-table-list td.action a{display: inline-block; width: 24px; height: 24px; background: #E2351E; border-radius: 12px; line-height: 24px; font-size: 16px; text-align: center; color: white; -webkit-transition:200ms all;}
    .mt-table-list td.action a:hover{font-size: 22px; background: white; color: #E2351E;}

    .mt-table-list td.action a.blue{background:#4798FF;}
    .mt-table-list td.action a.blue:hover{color:#4798FF; background:white;}

    /* Autosuggestions */
    .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
    .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
    .autocomplete-selected { background: #F0F0F0; }
    .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
    .autocomplete-group { padding: 2px 5px; }
    .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }


    /* Chart markup - for use with ChartJS */
    .chart{width:99%; height:300px; margin:0 0 20px 0;}
    #chart-tooltip {opacity: 1; position: absolute; background: rgba(255, 255, 255, .9); color: white; padding: 10px; border-radius: 2px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);}
    .chart-tooltip-title{font-weight: bold; font-size: 16px; color: #093163; padding-bottom: 7px;}
    .chart-tooltip-section{position: relative; padding: 2px 100px 2px 2px;}
    .chart-tooltip-key{display: inline-block; width: 16px; height: 16px; border-radius: 3px; position: relative; top: 3px;}
    .chart-tooltip-label{font-size: 13px;}
    .chart-tooltip-value{font-weight: bold; position: absolute; right: 0px; top: 2px;}


    .chart-legend{text-align: center; margin-bottom:20px;}
    .chart-legend-item{display: inline-block; padding: 2px 15px; width: auto;}
    .chart-legend-item .colour{display: inline-block; width: 16px; height: 16px; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3), 0 0 3px rgba(0, 0, 0, 0.4) inset;}
    .chart-legend-item .label{display: inline-block; padding: 0 4px 0 4px; position: relative; top: -3px;}


    /* handleError styling */
    .error-popup .error-vars .error-vars-handle{color:#777;}
    .error-popup .error-vars .error-vars-handle:before{content:'Show'; display:inline-block; padding-right:3px;}
    .error-popup .error-vars.open .error-vars-handle:before{content:'Hide';}

    .error-popup .error-vars.open pre{display:block;}
    .error-popup pre{padding: 6px 10px; border: 1px solid #f3e5ea; background: #E9F5FA; overflow-x: scroll; margin: 10px 0; display:none;}

    .error-popup .modal-content-wrapper{overflow-y:scroll; margin: -10px -10px -15px 0; padding: 10px 10px 10px 0;}
    .modal-window.error-popup {background-color: #FFE3E3; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFC5C5),color-stop(1, #F16060)); border: 1px solid #FF9393;}
    .modal-window.error-popup .modal-title{color:#530000;}
    .modal-window.error-popup .modal-content{border:1px solid #CF6565;}


    /* Floating button.  */
    #mt-floating-options {position: fixed; bottom: 70px; right: 10px; opacity:1; -webkit-transition: 200ms all; text-align: right; z-index: 10;}
    #mt-floating-options.slide-in{right:70px; opacity:1;}
    #mt-floating-options .mt-floating-options-items {width: 400px;}
    .mt-floating-options-handle.fa {background: red; width: 50px; height: 50px; border-radius: 50%; color: white; line-height: 50px; text-align: center; font-size: 18px; z-index: 10; position: absolute; bottom: 0; padding-left: 3px; right: 0; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); -webkit-transition: 200ms all;}
    .mt-floating-options-handle.fa:hover {background: red; width: 60px; height: 60px; line-height: 60px; padding-left: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); bottom: -5px; right: -5px; font-size: 22px;}
    .mt-floating-options-item {position: absolute; bottom: 0; right: -100px; display: block; -webkit-transition: 300ms all; opacity: 0; background: red; padding: 0 0 0 33px; border-radius: 17px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4); width: 33px; height: 33px; overflow: hidden;}
    #mt-floating-options.active .mt-floating-options-item {opacity: 1; bottom: 60px; z-index: 9; right:9px;}
    #mt-floating-options.active .mt-floating-options-item.index-1 {bottom: 100px;}
    #mt-floating-options.active .mt-floating-options-item.index-2 {bottom: 140px;}
    #mt-floating-options.active .mt-floating-options-item.index-3 {bottom: 180px;}
    #mt-floating-options.active .mt-floating-options-item.index-4 {bottom: 220px;}
    #mt-floating-options.active .mt-floating-options-item.index-5 {bottom: 260px;}
    #mt-floating-options.active .mt-floating-options-item.index-6 {bottom: 300px;}

    .mt-floating-options-item span {font-size: 14px; color: white; position: absolute; top: 8px; left: 45px; display: block; white-space: nowrap;}
    .mt-floating-options-item i {position: absolute; width: 27px; height: 40px; color: white; line-height: 35px; font-size: 20px; top: 0; left: 0;}
    .mt-floating-options-item i.fa-plus{width:25px;}
    .mt-floating-options-item:hover i{width:30px; opacity:0.9;}



    /* Pagers in content filter */
    #content-filters .pager
    {
        position: absolute;
        bottom: -14px;
        right: 10px;
        overflow-x: auto;
        max-width: 50%;
        white-space: nowrap;
    }
    #content-filters .pager::-webkit-scrollbar
    {
        height: 4px;
    }
    #content-filters .pager::-webkit-scrollbar-thumb
    {
        background: #eeeeee;
        border-radius: 4px;
    }
    #content-filters .pager a.active {background: #8FF5D0; border-color: #76DAB6; color: #0D8D6E; font-weight: bold; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) inset;}
    #content-filters .pager a:hover {background: #C8F6FF; border-color: #BAD4E0; color: #307CA0;}
    #content-filters .pager a {display: inline-block; padding: 5px 0; background: #EEE; border: 1px solid #DFDFDF; margin-left: 2px; border-radius: 4px; text-align: center; width: 30px; box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.05) inset; color: #888; -webkit-transition: 300ms background; border-bottom: 1px solid #D1D1D1; border-right: 1px solid #CFCFCF;}


    /* Smiley faces */
    [class^="smiley-"] {width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; display:block;}
    .smiley-green {background: #a9db7a; border: 5px solid #92c563; position: relative; }
    .smiley-green .left-eye {width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; }
    .smiley-green .right-eye {width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; }
    .smiley-green .smile {position: absolute; top :67%; left: 16.5%; width: 70%; height: 20%; min-height:8px; overflow: hidden; }
    .smiley-green .smile:after, .smiley-green .smile:before {content: ""; position:absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; }
    .smiley-green .smile:after {background: #84b458; height: 80%; top: -40%; left: 0%; }


    .smiley-yellow {background: #eed16a; border: 5px solid #dbae51; position: relative; }
    .smiley-yellow .left-eye {width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; }
    .smiley-yellow .right-eye {width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; }
    .smiley-yellow .smile {position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; }

    .smiley-red {background: #ee9295; border: 5px solid #e27378; position: relative; }
    .smiley-red .left-eye {width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; }
    .smiley-red .right-eye {width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; }
    .smiley-red .smile {position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; min-height:6px; overflow: hidden; }
    .smiley-red .smile:after, .smiley-red .smile:before {content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; }
    .smiley-red .smile:after {background: #d96065; height: 80%; top: 60%; left: 0%; }



    /** copied from bootstrap */

    .w-25 {
        width: 25% !important;
    }

    .w-50 {
        width: 50% !important;
    }

    .w-75 {
        width: 75% !important;
    }

    .w-100 {
        width: 100% !important;
    }

    .w-auto {
        width: auto !important;
    }

    .h-25 {
        height: 25% !important;
    }

    .h-50 {
        height: 50% !important;
    }

    .h-75 {
        height: 75% !important;
    }

    .h-100 {
        height: 100% !important;
    }

    .h-auto {
        height: auto !important;
    }

    .mw-100 {
        max-width: 100% !important;
    }

    .mh-100 {
        max-height: 100% !important;
    }

    .min-vw-100 {
        min-width: 100vw !important;
    }

    .min-vh-100 {
        min-height: 100vh !important;
    }

    .vw-100 {
        width: 100vw !important;
    }

    .vh-100 {
        height: 100vh !important;
    }

    .m-0 {
        margin: 0 !important;
    }

    .mt-0,
    .my-0 {
        margin-top: 0 !important;
    }

    .mr-0,
    .mx-0 {
        margin-right: 0 !important;
    }

    .mb-0,
    .my-0 {
        margin-bottom: 0 !important;
    }

    .ml-0,
    .mx-0 {
        margin-left: 0 !important;
    }

    .m-1 {
        margin: 0.25rem !important;
    }

    .mt-1,
    .my-1 {
        margin-top: 0.25rem !important;
    }

    .mr-1,
    .mx-1 {
        margin-right: 0.25rem !important;
    }

    .mb-1,
    .my-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-1,
    .mx-1 {
        margin-left: 0.25rem !important;
    }

    .m-2 {
        margin: 0.5rem !important;
    }

    .mt-2,
    .my-2 {
        margin-top: 0.5rem !important;
    }

    .mr-2,
    .mx-2 {
        margin-right: 0.5rem !important;
    }

    .mb-2,
    .my-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-2,
    .mx-2 {
        margin-left: 0.5rem !important;
    }

    .m-3 {
        margin: 1rem !important;
    }

    .mt-3,
    .my-3 {
        margin-top: 1rem !important;
    }

    .mr-3,
    .mx-3 {
        margin-right: 1rem !important;
    }

    .mb-3,
    .my-3 {
        margin-bottom: 1rem !important;
    }

    .ml-3,
    .mx-3 {
        margin-left: 1rem !important;
    }

    .m-4 {
        margin: 1.5rem !important;
    }

    .mt-4,
    .my-4 {
        margin-top: 1.5rem !important;
    }

    .mr-4,
    .mx-4 {
        margin-right: 1.5rem !important;
    }

    .mb-4,
    .my-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-4,
    .mx-4 {
        margin-left: 1.5rem !important;
    }

    .m-5 {
        margin: 3rem !important;
    }

    .mt-5,
    .my-5 {
        margin-top: 3rem !important;
    }

    .mr-5,
    .mx-5 {
        margin-right: 3rem !important;
    }

    .mb-5,
    .my-5 {
        margin-bottom: 3rem !important;
    }

    .ml-5,
    .mx-5 {
        margin-left: 3rem !important;
    }

    .p-0 {
        padding: 0 !important;
    }

    .pt-0,
    .py-0 {
        padding-top: 0 !important;
    }

    .pr-0,
    .px-0 {
        padding-right: 0 !important;
    }

    .pb-0,
    .py-0 {
        padding-bottom: 0 !important;
    }

    .pl-0,
    .px-0 {
        padding-left: 0 !important;
    }

    .p-1 {
        padding: 0.25rem !important;
    }

    .pt-1,
    .py-1 {
        padding-top: 0.25rem !important;
    }

    .pr-1,
    .px-1 {
        padding-right: 0.25rem !important;
    }

    .pb-1,
    .py-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-1,
    .px-1 {
        padding-left: 0.25rem !important;
    }

    .p-2 {
        padding: 0.5rem !important;
    }

    .pt-2,
    .py-2 {
        padding-top: 0.5rem !important;
    }

    .pr-2,
    .px-2 {
        padding-right: 0.5rem !important;
    }

    .pb-2,
    .py-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-2,
    .px-2 {
        padding-left: 0.5rem !important;
    }

    .p-3 {
        padding: 1rem !important;
    }

    .pt-3,
    .py-3 {
        padding-top: 1rem !important;
    }

    .pr-3,
    .px-3 {
        padding-right: 1rem !important;
    }

    .pb-3,
    .py-3 {
        padding-bottom: 1rem !important;
    }

    .pl-3,
    .px-3 {
        padding-left: 1rem !important;
    }

    .p-4 {
        padding: 1.5rem !important;
    }

    .pt-4,
    .py-4 {
        padding-top: 1.5rem !important;
    }

    .pr-4,
    .px-4 {
        padding-right: 1.5rem !important;
    }

    .pb-4,
    .py-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-4,
    .px-4 {
        padding-left: 1.5rem !important;
    }

    .p-5 {
        padding: 3rem !important;
    }

    .pt-5,
    .py-5 {
        padding-top: 3rem !important;
    }

    .pr-5,
    .px-5 {
        padding-right: 3rem !important;
    }

    .pb-5,
    .py-5 {
        padding-bottom: 3rem !important;
    }

    .pl-5,
    .px-5 {
        padding-left: 3rem !important;
    }

    /* Components */
    div.component
    {
        display: inline-block;
    }
}