/*
    AUTHOR: ThangTran
    LAST MOFIDICATION: 2018.02.15
*/

/* === DEFAULT =================================================================== */
/* adjust font style of the input placeholder */
/* ReSharper disable once CssNotResolved */
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: lightgray !important;
    font-style: italic !important;
    /* ReSharper disable once CssBrowserCompatibility */
    /*opacity: 1 !important;*/ /* Firefox */
}

/* reduce the margin bottom of the p tag, it's too much!' */
p {
    margin-bottom: 0.5rem;
}

/* implement the blockquote style, bootstrap "blockquote" class is too big and ugly " */
blockquote {
    border-left: 0.5em solid whitesmoke;
    padding-left: 1em;
    font-style: italic;
    font-size: smaller;
}

/* ensure the max-height of the ck-editor is within the viewport, otherwise the toolbar will be out of visible screen, which is very annoying */
.ck-editor__editable {
    max-height: 50vh;
}
/* === DEFAULT END =================================================================== */
/* === RESPONSIVE =================================================================== */
@media screen and (max-width: 768px) {
    .d-phone-none {
        display: none;
    }

    /* make stuffs smaller on phone */
    body {
        font-size: 75%;
    }    
}
/* === RESPONSIVE END =================================================================== */

/* === WIDTH =================================================================== */
.mw100p {
    max-width: 100% !important;
}

.mw5em {
    max-width: 5em;
}

.mw10em {
    max-width: 10em;
}

.mw20em {
    max-width: 20em;
}

.mw40em {
    max-width: 40em;
}

.mw50em {
    max-width: 50em;
}

.mw100em {
    max-width: 100em;
}

.mw-reset {
    max-width: initial !important;
}

.w-reset {
    width: initial !important;
}

.w100p {
    width: 100%;
}

.w99p {
    width: 99%;
}

.w50p {
    width: 50%;
}

.w48p {
    width: 48%;
}

.w1em {
    width: 1em;
}

/* === WIDTH END =================================================================== */

/* === COLOR =================================================================== */
.color-red {
    color: red;
}

.color-blue {
    color: blue;
}

.color-yellow {
    color: yellow;
}

.color-lightgray {
    color: lightgray;
}

.color-gray {
    color: gray;
}

.color-black {
    color: black;
}

.color-white {
    color: white;
}

.color-green {
    color: green;
}

.bgcolor-transparent {
    background-color: transparent;
}

.bgcolor-lightgray {
    background-color: lightgray;
}

.bgcolor-yellow {
    background-color: yellow;
}

.bgcolor-green {
    background-color: green;
}

.bgcolor-black {
    background-color: black;
}
/* === COLOR END =================================================================== */
/* === TEXT =================================================================== */
.text-nobold {
    font-weight: normal !important;
}

.text-required:after {
    color: red;
    content: "*";
}

.text-code {
    font-family: "Courier New";
    font-size: 0.8em;
}

/*.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
}*/

.text-bold {
    font-weight: bold;
}

.text-italic {
    font-style: italic;
}

.text-underline {
    text-decoration: underline;
}

.text-larger {
    font-size: larger;
}

.text-large {
    font-size: large;
}

.text-small {
    font-size: small;
}

.text-smaller {
    font-size: smaller;
}

.text-one-line {
    overflow: hidden;
    white-space: nowrap;
}

.text-justify {
    text-align: justify !important;
}

.text-br {
    white-space: pre-wrap;
}

/* === TEXT END =================================================================== */

/* === DISPLAY =================================================================== */
.display-block {
    display: block;
}
.display-inline {
    display: inline !important;
}
.display-inline-block {
    display: inline-block;
}
/* === DISPLAY END =================================================================== */

/* === PADDING =================================================================== */
.padding-0 {
    padding: 0;
}
.padding-left-1em {
    padding-left: 1em;
}
/* === PADDING END =================================================================== */

/* === MARGIN =================================================================== */
.margin-auto {
    margin: auto;   
}

.margin-0 {
    margin: 0;
}
.margin-top-0 {
    margin-top: 0;
}
.margin-top-1em {
    margin-top: 1em;
}

.margin-bottom-1em {
    margin-bottom: 1em;
}

.margin-left-05em {
    margin-left: 0.5em;
}

.margin-left-1em {
    margin-left: 1em;
}
.margin-left-2em {
    margin-left: 2em;
}

.margin-right-05em {
    margin-right: 0.5em;
}

.margin-right-1em {
    margin-right: 1em;
}

.margin-left-auto {
    margin-left: auto;
}
/* === MARGIN END =================================================================== */

/* === FORM =================================================================== */
.form-control-noborder:not(:focus) {
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
}
/* === FORM END =================================================================== */

/* === CURSOR =================================================================== */
.cursor-drag {
    cursor: move;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-hand {
    cursor: pointer !important;
}
/* === CURSOR END =================================================================== */

/* === VERT =================================================================== */

.vert-center {
    vertical-align: middle !important;
}

tr.vert-center > td {
    vertical-align: middle !important;
}

/* === VERT END =================================================================== */

/* === TILE =================================================================== */

.tile-container {
    display: inline-block;
    text-align: center;
    overflow: hidden;
    display: inline-block;
    margin: 0.5em;
    /* https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/ */
    -webkit-box-shadow: #222 0.2em 0.2em 1em;
    -ms-box-shadow: #222 0.2em 0.2em 1em;
    box-shadow: #222 0.2em 0.2em 1em;    
}
.tile-container-hover .tile-content {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.tile-container-hover:hover .tile-content {
    -webkit-filter: brightness(110%);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.tile-content {        
    position: relative;
    float: left;
    width: 25em;
    height: 20em;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -ms-background-size: contain;
    background-size: contain;    
}

/* === TILE END =================================================================== */