/* FORM */
form {
    display: block;
    margin: 0 auto;
    padding: 0;
}
form,input,select,label,button,textarea {font-family: inherit;}
form .row {
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
}
form .row label {
    padding: .5rem;
    font-size: .8rem;
}
form div.cell { margin: 4px 0;}
form input, form textarea, form select {
    margin: 0;
    padding: .7rem;
    font-size: .9rem;
    /*line-height: 1rem;*/
    color: #333;
    background-color: #FFF;
    border: 1px solid #DDD;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 0.3rem;
}
form select {
    width: auto;
    padding: .6rem;
}
form input[disabled], form textarea[disabled], form select[disabled] {
    background-color: #EEE;
}
form input[type='checkbox'], form input[type='file'], form input[type='radio'] {
    width: auto;
    margin: 6px;
    border: none;
}
form input[type='submit'], form input[type='reset'] {
    width: auto;
    min-width: fit-content;
    margin: 0;
    padding: .7rem;
    color: #333;
    font-size: .8rem;
    line-height: 1rem;
    background-color: #DDD;
    border: 1px solid #D7D7D7;
}
form input[type='date'] {
    width: auto;
    padding: .6rem;
}
form textarea {
    width: 340px;
    height: 200px;
}
form textarea.no-resize { resize: none; }
form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: .8; /* Firefox */
}
form .image-preview img {
    height: auto;
    max-width: 300px;
    max-height: 200px;
    border: 1px solid #D7D7D7;
}

.form-grid {
    /*display: grid;*/
}
.form-grid .grid {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    padding: 10px;
}

/* BUTTON */
.btn {
    display: inline-block;
    min-width: 60px;
    margin: 0;
    padding: .7rem;
    color: #333;
    font-size: .8rem;
    line-height: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #DDD;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 0.3rem;
}
.btn > i.fa { min-width: 0; }
.btn-block { display: block; width: 100%; }
.btn-top { vertical-align: top; }
.btn-middle { vertical-align: middle; }
.btn-bottom { vertical-align: bottom; }
.btn-small {
    min-width: 50px;
    padding: .5rem;
    font-size: .7rem;
    line-height: .8rem;
}
.btn-tiny {
    min-width: 30px;
    padding: .3rem;
    font-size: .6rem;
    line-height: .6rem;
}
.btn-big { 
    padding: 1rem;
    font-size: 1.4rem;
}
.btn-giant { 
    padding: 1.4rem;
    font-size: 1.8rem;
}
.btn-no-width {
    width: auto;
    min-width: 0;
}
.btn-no-radius {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.btn-no-border { border: none; }
.btn-primary { color: #FFF; background-color: #274472; border-color: #274472; }
.btn-secondary { color: #FFF; background-color: #EF7C8E; border-color: #EF7C8E; }
.btn-ok { color: #FFF; background-color: #01949A; border-color: #01949A; }
.btn-cancel { color: #FFF; background-color: #BA0F30; border-color: #BA0F30; }
.btn-black { color: #EEE; background-color: #000; border-color: #000; }
.btn-white { color: #555; background-color: #FFF; border-color: #D7D7D7; }
.btn-orange { color: #FFF; background-color: #FF4500; border-color: #FF4500; }
.btn-blue { color: #FFF; background-color: #0066A4; border-color: #0066A4; }
.btn-turqoise { color: #1F3541; background-color: #C8F4F9; border-color: #C8F4F9; }
.btn-red { color: #FFF; background-color: #BA0F30; border-color: #BA0F30; }
.btn-green { color: #FFF; background-color: #59981A; border-color: #59981A; }
.btn-yellow { color: #333652; background-color: #FAD02C; border-color: #FAD02C; }
.btn-purple { color: #FFF; background-color: purple; border-color: purple; }
.btn-gray { color: #000; background-color: gray; border-color: gray; }
.btn-pink { color: #FFF; background-color: #D67BA8; border-color: #D67BA8; }
.btn-cream { color: #444; background-color: #FAE8E0; border-color: #FAE8E0; }
.btn-navy { color: #C0DCEC; background-color: #004369; border-color: #004369; }
.btn-brown { color: #FFF; background-color: #A45C40; border-color: #A45C40; }
.btn-bg { color: #FFF; background-color: #A91B60; border-color: #A91B60; }

/* BALLOON MESSAGE */
.balloon-message {
    position: relative;
    display: block;
    margin-bottom: 5px;
    padding: 5px 10px;
    color: #333;
    background-color: #ffffff;
    /*border: 1px solid #ddd;*/
    border-radius: 0.3rem;
}
.balloon-message .btn-balloon-close {
    position: absolute;
    top: 5px;
    right: 10px;
    margin: 0;
    padding: 0;
    color: #888;
    background: none;
    border: none;
}
.balloon-error { background-color: #FBC2C4; }
.balloon-success { background-color: #c2ffc2; }
.balloon-warning { background-color: #fcefa1; }
.balloon-info { background-color: #c3d9ff; }

.green {color: #33cc00;}
.light-green {color: #99ff00;}
.blue {color: #18C0DF;}
.red {color: red;}
.yellow {color: #FFD324;}
.gold {color: #DBAA3C;}
.orange {color: #ff9b00;}
.light-gray {color: #D7D7D7;}
.gray {color: #888;}
.dark-green { color: #0a7c04; }
.darker-green { color: #006400; }

.col-base { color: #1F3541; }
.col-primary { color: #274472; }
.col-secondary { color: #EF7C8E; }
.col-black { color: #000; }
.col-white { color: #FFF; }
.col-cream { color: #FAE8E0; }
.col-orange { color: #FF4500; }
.col-blue { color: #0066A4; }
.col-red { color: #BA0F30; }
.col-green { color: #59981A; }
.col-yellow { color: #FAD02C; }
.col-purple { color: purple; }
.col-gray { color: gray; }
.col-pink { color: #D67BA8; }
.col-cream { color: #FAE8E0; }
.col-navy { color: #004369; }
.col-brown { color: #A45C40; }

.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000; }
.bg-gray { background-color: #DDD; }
.bg-red { background-color: #C00; }
.bg-green { background-color: #33cc00; }
.bg-blue { background-color: #79B4DC; }

.tx-plain {color: inherit; text-decoration: none;}
.tx-center { text-align: center; }
.tx-left { text-align: left; }
.tx-right { text-align: right; }
.tx-justify { text-align: justify; }
.tx-top { vertical-align: top; }
.tx-middle { vertical-align: middle; }
.tx-bottom { vertical-align: bottom; }
.tx-normal { font-weight: normal;}
.tx-bold { font-weight: bold; }
.tx-bolder { font-weight: bolder; }
.tx-italic { font-style: italic; }
.tx-underline { text-decoration: underline; }
.tx-overline { text-decoration: overline; }
.tx-line-through { text-decoration: line-through; }
.tx-overunderline { text-decoration: underline overline; }
.tx-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-stroke {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    -webkit-text-stroke: 1px #000;
}
.tx-stroke-gray {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #888;
    -webkit-text-stroke: 1px #888;
}
.tx-shadow {
    text-shadow: 2px 2px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000;
}

.tx-small { font-size: .8rem; line-height: 1.2rem; }
.tx-xsmall { font-size: .7rem; line-height: 1rem; }
.tx-xxsmall { font-size: .6rem; line-height: .8rem; }
.tx-standard { font-size: 1rem; line-height: 1.6rem; }
.tx-large { font-size: 1.3rem; line-height: 2rem; }
.tx-xlarge { font-size: 1.6rem; line-height: 2.4rem; }
.tx-xxlarge { font-size: 2rem; line-height: 3rem; }

/* SPACER */
.spacer-05 { display: block; height: .5rem; content: '' }
.spacer-1 { display: block; height: 1rem; content: '' }
.spacer-2 { display: block; height: 2rem; content: '' }
.spacer-3 { display: block; height: 3rem; content: '' }
.spacer-4 { display: block; height: 4rem; content: '' }
.spacer-5 { display: block; height: 5rem; content: '' }
.spacer-6 { display: block; height: 6rem; content: '' }
.spacer-7 { display: block; height: 7rem; content: '' }
.spacer-8 { display: block; height: 8rem; content: '' }
.spacer-9 { display: block; height: 9rem; content: '' }
.spacer-10 { display: block; height: 10rem; content: '' }

.opacity-10 { filter: alpha(opacity=10); opacity: .1; }
.opacity-20 { filter: alpha(opacity=20); opacity: .2; }
.opacity-30 { filter: alpha(opacity=30); opacity: .3; }
.opacity-40 { filter: alpha(opacity=40); opacity: .4; }
.opacity-50 { filter: alpha(opacity=50); opacity: .5; }
.opacity-60 { filter: alpha(opacity=60); opacity: .6; }
.opacity-70 { filter: alpha(opacity=70); opacity: .7; }
.opacity-80 { filter: alpha(opacity=80); opacity: .8; }
.opacity-90 { filter: alpha(opacity=90); opacity: .9; }

.jc-center {
    text-align: center;
    justify-content: center;
}
.jc-right {
    text-align: right;
    justify-content: flex-end;
}

hr { 
    border: 0;
    height: 1px;
    margin: 1rem 0;
    background-color: #EEE;
}
hr.linear { 
    border: 0;
    height: 2px;
    margin: 1rem 0;
    background-image: linear-gradient(to right, whitesmoke, #A91B60, whitesmoke);
}

a.clear { color: inherit; text-decoration: none; }
a.no-decor { text-decoration: none; }
a.col-inherit-no-decor { color: inherit; text-decoration: none; }
.load-more {
    color: #888;
    font-weight: bold;
    text-align: center;
}
.load-more a {
    color: inherit;
    text-decoration: none;
}

/* PAGINATION */
.paging {
    display: block;
}
.paging ul {
    margin: 0;
    padding: 5px;
    white-space: nowrap;
    overflow-y: scroll;
}
.paging ul > li {
    display: inline-block;
}
.paging ul > li > a {
    display: block;
    padding: 5px 8px;
    color: #79B4DC;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #FFF;
    border: 1px solid #79B4DC;
}
.paging ul > li.selected > a {
    color: #FFF;
    background-color: #79B4DC;
}

/* OTHER */
.block { display: block; }
.block:before {
    content: '';
    display: block;
}
.block:after { 
    content: '';
    display: block;
    clear: both;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.float-left-res { float: left; }
.float-right-res { float: right; }
@media (max-width:600px){
    .float-left-res, .float-right-res {
        float: none;
    }
}

.inline-block { display: inline-block; }
.clear { clear: both; }
.hidden { display: none; }

.hidden-scroll {
    -ms-overflow-style: none;
    overflow: -moz-scrollbar-none;
}
.hidden-scroll::-webkit-scrollbar { width: 0 !important; }

/* FONT */
@font-face {
    font-family: Pacifico;
    src: url(Pacifico.ttf);
}
@font-face {
    font-family: Lobster;
    src: url(Lobster_1.3.otf);
}

.font-pacifico { font-family: Pacifico; }
.font-lobster { font-family: Lobster; }