/*CLIO LIBRARY*/
/*KGARMIRE 2019-12-23*/

/*TO INIT - wrap desired objects in .clio container*/

/*
    BREAK POINTS
    < 576px    | mobile
    >= 576px   | mobile landscape
    >= 768px   | tablet
    >= 992px   | tablet landscape
    >= 1200    | desktop
*/

*{
    /*Keep it inside 100%*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

*:focus{outline:0; }

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

/* --- GLOBAL --- */
.clio{
    /*font-family: Open Sans, sans-serif;*/
}

.clio .soft-round{border-radius:4px; }
.clio .hard-round{border-radius:8px; }
.clio .round{border-radius:50rem; }
.clio .bump{margin-top:8px !important; }
.clio .lg-bump{margin-top:16px !important; }

.clio .bold{font-weight:bold;}
.clio .italic{font-weight:italic;}

.flex{display:flex; }
.center{margin:auto !important; }
.v-center{margin:auto 0 !important; }
.h-center{margin:0 auto !important; }
.nm{margin: 0 !important;}
.nm-b{margin-bottom: 0 !important;}
.nm-t{margin-top: 0 !important;}
.none{display:none; }

p{margin:0px; }

/* --- COLORING --- */
.clio .txt-blue{color:steelblue;}
.clio .txt-red{color:crimson;}
.clio .txt-green{color:mediumseagreen;}
.clio .txt-forestgreen{color:forestgreen;}
.clio .txt-yellow{color:goldenrod;}
.clio .txt-gray{color:gray;}
.clio .txt-light-gray{color:lightgray;}
.clio .txt-off-black{color:#222;}
.clio .txt-white{color:white;}

.clio .bg-blue{background-color:steelblue;}
.clio .bg-red{background-color:crimson;}
.clio .bg-green{background-color:mediumseagreen;}
.clio .bg-forestgreen{background-color:forestgreen;}
.clio .bg-yellow{background-color:goldenrod;}
.clio .bg-gray{background-color:gray;}
.clio .bg-light-gray{background-color:lightgray;}
.clio .bg-off-black{background-color:#222;}
.clio .bg-white{background-color:white;}

/* --- TEXT --- */
.clio .txt-left{text-align:left}
.clio .txt-right{text-align:right}
.clio .txt-center{text-align:center}
.clio .txt-middle{vertical-align:middle;}


/* --- BUTTONS --- */
.clio button{
    width:100%;
    min-height:32px;
    cursor: pointer;
    
    background-color: steelblue;
    border:none;
    /*border-radius:4px;*/
    
    color:white;
    font-weight: bold;
}
.clio button:hover{
    background-color: #176090;
    /*chroma('steelblue').darken(0.75).hex()*/
}
.clio button.hollow{
    background-color: transparent;
    color:steelblue;
    border:1px solid steelblue;
}
.clio button.hollow:hover{
    background-color: rgba(70,130,180,0.2);
    /*chroma('steelblue').alpha(0.2).css()*/
}

.clio button.black{
    background-color:#222;
}
.clio button.black:hover{
    background-color:#000;
}
.clio button.black.hollow{
    background-color: transparent;
    color:#222;
    border:1px solid #222;
}
.clio button.black.hollow:hover{
    background-color: rgba(34,34,34,0.2);
}

.clio button.red{
    background-color:crimson;
}
.clio button.red:hover{
    background-color:#a20016;
}
.clio button.red.hollow{
    background-color: transparent;
    color:crimson;
    border:1px solid crimson;
}
.clio button.red.hollow:hover{
    background-color: rgba(220,20,60,0.2);
}

.clio button.green{
    background-color:mediumseagreen;
}
.clio button.green:hover{
    background-color:#008e50;
}
.clio button.green.hollow{
    background-color: transparent;
    color:mediumseagreen;
    border:1px solid mediumseagreen;
}
.clio button.green.hollow:hover{
    background-color: rgba(60,179,113,0.2);
}

.clio button.forestgreen{
    background-color:forestgreen;
}
.clio button.forestgreen:hover{
    background-color:#006800;
}
.clio button.forestgreen.hollow{
    background-color: transparent;
    color:forestgreen;
    border:1px solid forestgreen;
}
.clio button.forestgreen.hollow:hover{
    background-color: rgba(34,139,34,0.2);
}

.clio button.yellow{
    background-color:goldenrod;
    /*color:black;*/
}
.clio button.yellow:hover{
    background-color:#b18200;
}
.clio button.yellow.hollow{
    background-color: transparent;
    color:goldenrod;
    border:1px solid goldenrod;
}
.clio button.yellow.hollow:hover{
    background-color: rgba(218,165,32,0.2);
}

.clio button.gray{
    background-color:gray;
}
.clio button.gray:hover{
    background-color:#5e5e5e;
}
.clio button.gray.hollow{
    background-color: transparent;
    color:gray;
    border:1px solid gray;
}
.clio button.gray.hollow:hover{
    background-color: rgba(128,128,128,0.2);
}

.clio button.white{
    background-color:white;
    color:gray;
}
.clio button.white:hover{
    background-color:#f1f1f1;
}
.clio button.white.hollow{
    background-color: transparent;
    color:white;
    border:1px solid white;
}
.clio button.white.hollow:hover{
    background-color: rgba(255,255,255,0.2);
}


/* INPUTS */
.clio input, .clio select{
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    /*border-radius: 4px;*/
    /*margin:8px 0px;*/
}

.clio input {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
    
.clio select{
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.075);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.clio textarea{
    min-height:80px;
    max-width:100%;
    min-width: 100%;
}

.clio input.invalid, .clio textarea.invalid, .clio select.invalid {
    border-color:crimson;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    background-color: #F2DEDE;
}

.clio input.warning, .clio textarea.warning, .clio select.warning{
    border-color:goldenrod;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    background-color: #F2DEDE;
}

.clio .link{
    text-decoration: none;
    width:100%;
    cursor:pointer;
}

/* --- GRIDS --- */
.clio .grid-2{display:grid;grid-template-columns: 1fr 1fr;grid-gap: 8px;}
.clio .grid-3{display:grid;grid-template-columns: repeat(3, 1fr);grid-gap: 8px;}
.clio .grid-4{display:grid;grid-template-columns: repeat(4, 1fr);grid-gap: 8px;}
.clio .grid-5{display:grid;grid-template-columns: repeat(5, 1fr);grid-gap: 8px;}
.clio .grid-6{display:grid;grid-template-columns: repeat(6, 1fr);grid-gap: 8px;}
.clio .grid-7{display:grid;grid-template-columns: repeat(7, 1fr);grid-gap: 8px;}
.clio .grid-8{display:grid;grid-template-columns: repeat(8, 1fr);grid-gap: 8px;}
.clio .grid-9{display:grid;grid-template-columns: repeat(9, 1fr);grid-gap: 8px;}
.clio .grid-12{display:grid;grid-template-columns: repeat(12, 1fr);grid-gap: 8px;}

.clio .grid-48-1{display:grid;grid-template-columns: 48px 1fr;grid-gap: 8px;}
.clio .grid-36-1{display:grid;grid-template-columns: 36px 1fr;grid-gap: 8px;}
.clio .grid-24-1{display:grid;grid-template-columns: 24px 1fr;grid-gap: 8px;}
.clio .grid-18-1{display:grid;grid-template-columns: 18px 1fr;grid-gap: 8px;}

.clio .grid-1-48{display:grid;grid-template-columns: 1fr 48px;grid-gap: 8px;}
.clio .grid-1-36{display:grid;grid-template-columns: 1fr 36px;grid-gap: 8px;}
.clio .grid-1-24{display:grid;grid-template-columns: 1fr 24px;grid-gap: 8px;}
.clio .grid-1-18{display:grid;grid-template-columns: 1fr 18px;grid-gap: 8px;}

.clio .span-2{grid-column: span 2;}
.clio .span-3{grid-column: span 3;}
.clio .span-4{grid-column: span 4;}
.clio .span-5{grid-column: span 5;}
.clio .span-6{grid-column: span 6;}
.clio .span-7{grid-column: span 7;}
.clio .span-8{grid-column: span 8;}
.clio .span-9{grid-column: span 9;}
.clio .span-10{grid-column: span 10;}
.clio .span-11{grid-column: span 11;}

.clio .no-gap{grid-gap:0px;}
.clio .sm-gap{grid-gap:4px;}
.clio .lg-gap{grid-gap:16px;}

.grid-48-1 .material-icons.fit, .grid-1-48 .material-icons.fit{font-size:48px;margin:auto;}
.grid-36-1 .material-icons.fit, .grid-1-36 .material-icons.fit{font-size:36px;margin:auto;}
.grid-24-1 .material-icons.fit, .grid-1-24 .material-icons.fit{font-size:24px;margin:auto;}
.grid-18-1 .material-icons.fit, .grid-1-18 .material-icons.fit{font-size:18px;margin:auto;}

.grid-48-1 img.fit, .grid-1-48 img.fit{height:48px;width:48px;margin:auto;}
.grid-36-1 img.fit, .grid-1-36 img.fit{height:36px;width:36px;margin:auto;}
.grid-24-1 img.fit, .grid-1-24 img.fit{height:24px;width:24px;margin:auto;}
.grid-18-1 img.fit, .grid-1-18 img.fit{height:18px;width:18px;margin:auto;}

/* --- CARDS --- */
.clio .card{
    border:1px solid lightgray;
    background-color: #f1f1f1;
    padding:16px;
    min-height:64px;
    /*border-radius: 4px;*/
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
}

.clio .card h1{
    font-size: 2rem;
    font-weight: bold;
    margin:0px;
}

.clio .card h2{
    font-size: 1.1rem;
    font-weight: bold;
    margin:0px;
}

.clio .card hr{
    width:96%;
    margin: 8px 2%;
    border:1px solid lightgray;
}

/* --- SHADOWS --- */
.clio .shadow-0{box-shadow: none;}
.clio .shadow-1{box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);}
.clio .shadow-2{box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);}
.clio .shadow-4{box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);}
.clio .shadow-6{box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20);}
.clio .shadow-8{box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);}
.clio .shadow-12{box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);}
.clio .shadow-16{box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);}
.clio .shadow-24{box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);}



/* --- animations --- */

.animate-spin{
  animation-name: spin;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}

.forever{
  animation-iteration-count: infinite;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*------------ SCROLLBAR -------------*/
.slim-scroll{overflow-y:auto}
.slim-scroll::-webkit-scrollbar {width: 4px; }
.slim-scroll::-webkit-scrollbar-track {background: #f1f1f1; margin:8px 0px; border-radius:2px; }
.slim-scroll::-webkit-scrollbar-thumb {background: #888; border-radius:2px;}
.slim-scroll::-webkit-scrollbar-thumb:hover {background: #555; }