/*====================================*/
/*             COMMON.CSS             */
/*        KGARMIRE 2023-03-02         */
/*====================================*/

/*----------- BASIC SETUP ------------*/
*{
    /*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%;
    font-family:"Roboto", sans-serif;
}

body{
    height:auto;
    display:flex;
    background-color: darkslategray;
}

main {
    width:100%;
    height:auto;
    max-width: 800px;
    min-height:calc(100% - 48px);
    margin:24px auto;
}

section{
    margin:12px 0;
    background-color: #f1f1f1;
    padding: 12px;
}

/*--- TABS -----------------------*/
#tabs{
    display: flex;
    justify-content: space-evenly;
    gap:12px;
}

.tab{
    flex-grow: 1;
    padding: 12px 8px;
    margin: 0;

    color: #565656;
    background-color: #a3a3a3;
    border: 1px solid #565656;
    
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}

.tab.active{
    color:black;
    background-color: #f1f1f1;
}

/*---------- COMMON CLASSES ----------*/
h1,h2,h3,h4,h5,.montserrat{font-family: Montserrat, sans-serif;margin:0; }
h2,h3,h4,h5{font-weight: normal;}

.flex{display:flex;}
.flex-c{display:flex;flex-direction: column;}
.center{margin:auto;}
.v-center{margin:auto 0 !important;}
.h-center{margin:0 auto !important;}
.nm{margin: 0 !important}
.fill{height:100%;width:100%;}
.w-fill{width:100%;}
.h-fill{height:100%;}
.bump{margin-top:12px !important;}
.lg-bump{margin-top:24px !important;}
.sm-bump{margin-top:8px !important;}
.tail{margin-bottom:12px !important;}
.lg-tail{margin-bottom:24px !important;}
.sm-tail{margin-bottom:8px !important;}
.dnone{display: none;}
.padded{padding: 8px !important;}
.sm-padded{padding: 4px !important;}
.lg-padded{padding: 12px !important;}
.uppercase{text-transform: uppercase !important;}
a.nodeco{text-decoration: none !important}
.nm{margin:0}

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

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

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

.grid-1-auto{display:grid;grid-template-columns: 1fr auto;grid-gap: 8px;}
.grid-auto-1{display:grid;grid-template-columns: auto 1fr;grid-gap: 8px;}

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

.no-gap{grid-gap:0px;}
.sm-gap{grid-gap:4px;}
.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;}


/*-------------- INPUT ---------------*/
input, select, textarea{
    display: block;
    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;
    -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;
}

select, input[type="checkbox"]{box-shadow: none;}
textarea{resize: vertical;}

select.invalid,
input.invalid{
    border-color:#fa3030;
    background-color: #F2DEDE;
}

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

p.label{
    font-size: 0.9rem;
    color: #565656;
    margin:0;
}

.count.red{ color:crimson; }

p.note{
    font-size: 0.9rem;
    font-style:italic;
    margin:0;
}

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


/*------------- COPY-BOX -------------*/
.copy-box, .import-box{
    border:2px solid #222;

    display:grid;
    grid-template-columns: 1fr 34px;
}

.copy-target{    
    margin:auto;
    white-space: pre;
    padding:4px;
}

button.copy-button, button.import-button{
    background-color: black;
    color:white;
    border:none;
    width: 100%;
    min-height: 36px;
}

input.import-target{
    margin:0;
    border-radius:0;
    width: 100%;
    height:100%;
    border:none;
}