/* -------------------------------------------------------- */
/* v2 - 26.06.2020                                          */
/* -------------------------------------------------------- */

/* -------------------------------------------------------- */
/* GENERAL                                                  */
/* -------------------------------------------------------- */

/* ------------------------------------------------------------ Fonts */

@font-face { font-family: 'ft-b'; src: url('../fonts/Saira-Bold.ttf'); font-weight: normal; ; font-style: normal; }
@font-face { font-family: 'ft-l'; src: url('../fonts/Saira-Light.ttf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ft'; src: url('../fonts/Saira-Regular.ttf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'code'; src: url('../fonts/SourceCodePro-Regular.ttf'); font-weight: normal; font-style: normal; }

/* ------------------------------------------------------------ General */
body { font-family: 'ft'; font-size: 13px; background-color: var(--base-bg); color: var(--base-tx); overflow: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'ft-l'; color: var(--catch); margin-top: 5px; margin-bottom: 10px;}
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ------------------------------------------------------------ Text */
.tx_c { text-align: center; }
.tx_l { text-align: left; }
.tx_r { text-align: right; }
.tx_j { text-align: justify; }
.tx_2x { font-size: 2em; }
.tx_3x { font-size: 3em; }
.tx_4x { font-size: 4em; }
.tx_5x { font-size: 5em; }
.tx_normal { color: var(--base-tx); }
.tx_catch { color: var(--catch); }
.tx_catch_light { color: var(--catch-light); }
.tx_success { color: var(--tx-success); }
.tx_warning { color: var(--tx-warning); }
.tx_error { color: var(--tx-error); }
.tx_code { font-family: "code"; font-size: 1.1em; }
.tx_bold { font-family: 'ft-b'; }
.tx_italic { font-style: italic; }
.tx_small { font-size: 0.85em; }
.tx_big { font-size: 1.50em; }

/* ------------------------------------------------------------ Borders */
.bot_1 { border-top: 1px solid var(--bo-1); }
.bot_3 { border-top: 1px solid var(--bo-3); }
.bob_1 { border-bottom: 1px solid var(--bo-1); }
.bob_2 { border-bottom: 1px solid var(--bo-2); }
.bob_3 { border-bottom: 1px solid var(--bo-3); }
.bor_3 { border-right: 1px solid var(--bo-3); }
.bol_3 { border-left: 1px solid var(--bo-3); }
.bol_quote { border-left: 3px solid var(--catch); padding-left: 10px;}

/* ------------------------------------------------------------ Backgrounds */
.bg_2 { background-color: var(--bg-2); }

/* ------------------------------------------------------------ Margins */
.mg_0 {margin:0px !important;}
.mg_5 {margin:5px !important;}
.mg_10 {margin:10px !important;}
.mgt_2 {margin-top: 2px !important;}
.mgt_4 {margin-top: 4px !important;}
.mgt_5 {margin-top: 5px !important;}
.mgt_8 {margin-top: 8px !important;}
.mgt_10 {margin-top: 10px !important;}
.mgt_12 {margin-top: 12px !important;}
.mgt_15 {margin-top: 15px !important;}
.mgt_17 {margin-top: 17px !important;}
.mgt_20 {margin-top: 20px !important;}
.mgt_21 {margin-top: 21px !important;}
.mgt_22 {margin-top: 22px !important;}
.mgt_25 {margin-top: 25px !important;}
.mgt_40 {margin-top: 40px !important;}
.mgt_50 {margin-top: 50px !important;}
.mgt_100 {margin-top: 100px !important;}
.mgt_77 {margin-top: 77px !important;}
.mgb_5 {margin-bottom: 5px !important;}
.mgb_10 {margin-bottom: 10px !important;}
.mgb_20 {margin-bottom: 20px !important;}
.mgr_5 {margin-right: 5px !important;}
.mgr_10 {margin-right: 10px !important;}
.mgr_20 {margin-right: 20px !important;}
.mgl_5 {margin-left: 5px !important;}
.mgl_10 {margin-left: 10px !important;}
.mgl_20 {margin-left: 20px !important;}
.mgl_25 {margin-left: 25px !important;}
.mgl_30 {margin-left: 30px !important;}
.mgl_33 {margin-left: 33px !important;}
.mgl_35 {margin-left: 35px !important;}
.mgl_40 {margin-left: 40px !important;}
.mgl_60 {margin-left: 60px !important;}

/* ------------------------------------------------------------ Padding */
.pa_0 { padding:0px !important; }
.pa_10 { padding:10px !important; }
.pat_2 { padding-top:2px !important; }
.pat_10 { padding-top:10px !important; }
.pal_10 { padding-left:10px !important; }
.pal_20 { padding-left:20px !important; }
.pal_25 { padding-left:25px !important; }
.palr_10 { padding-left:10px !important; padding-right:10px !important; }
.pab_8 { padding-bottom:8px !important; }
.pab_10 { padding-bottom:10px !important; }

/* ------------------------------------------------------------ Heights */
.h_50 { height: 50px; }
.h_100 { height: 100px; }
.h_125 { height: 125px; }
.h_150 { height: 150px; }
.h_200 { height: 200px; }
.h_260 { height: 260px; }

/* ------------------------------------------------------------ Widths */
.w_200 { width: 200px; }
.w_300 { width: 300px; }
.w_400 { width: 400px; }
.w_470 { width: 470px; }
.w_500 { width: 500px; }
.w_600 { width: 600px; }

/* ------------------------------------------------------------ Link */
a { text-decoration: none; color:inherit; }
a:link { text-decoration: none; color:inherit; }
a:focus { text-decoration: none; color:inherit; }
a:visited { text-decoration: none; color:inherit; }
a:hover { text-decoration: none; color: var(--catch); }
a:active { text-decoration: none; color:inherit; }

/* ------------------------------------------------------------ Image */
.imgframe { border: 2px solid var(--bg-8); box-shadow: 5px 5px 5px var(--bg-1); padding: 2px; }
.imgresp { display:block; max-width:100%; height:auto; }
.img-circle { border-radius: 50%; }
.img-rounded { border-radius: 4px; }

/* -------------------------------------------------------- */
/* HELPERS                                                  */
/* -------------------------------------------------------- */
.left { float: left; }
.right { float: right; }
.drag { -webkit-app-region: drag; }
.clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }
.hover_catch:hover { background-color: var(--catch-darker); color: var(--tx-4); }
.bl_c { display: flex; justify-content: center; }
.bl_r { display: flex; justify-content: right; }
.bl_100 { width:100%; }
.bl_inline { display: inline-block; }

.pos_relative { position: relative; }
.pos_relative .pos_bottom { position: absolute; bottom: 10px; left: 10px;}

/* -------------------------------------------------------- */
/* LAYOUT                                                   */
/* -------------------------------------------------------- */

* { cursor: default; -webkit-user-select: none; -webkit-box-sizing: border-box; box-sizing: border-box; }
.window { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background-color: transparent;  }
.window-content { position: relative; overflow-y: auto; display: flex; flex: 1;  }
.pane-group { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; }
.pane { position: relative; overflow: hidden; flex: 1; padding: 4px; border-left: 1px solid var(--bo-3); }
@media (max-width: 768px) { 
    .pane { overflow-y: auto; }
}
.pane:first-child { border-left: 0; }
.sidebar { width: 220px; max-width: 220px; background-color: var(--bg-4); display: block; position: relative; z-index: 0; top: 0; left: 0; height: 100%;  }
.menu { float: left; margin: 4px 0 0 20px; } 

/*
.menu { display: none; float: left; margin: 4px 0 0 10px; } 
@media (max-width: 768px) { 
    .sidebar { display: none; top: 0; left: 0; height: 100%; } 
    .menu { display: block; } 
}*/

/*@media (max-height: 800px) { 
    .sidebar { display: none; z-index: 1; top: 0; left: 0; height: 100%; } 
    .menu { display: block; } 
}*/

.quit { position: absolute; bottom: 30px; width: 212px; }
.logo { color: var(--catch); font-size: 80px; text-align: center; text-shadow: 2px 2px 6px #101010; }

.toolbar {min-height: 22px; box-shadow: inset 0 1px 0 #303030; background-color: var(--bg-1); }
.toolbar:before, .toolbar:after { display: table; content: " "; }
.toolbar:after { clear: both; }
.toolbar-header { border-bottom: 1px solid var(--bo-1); }
.toolbar-header .title { margin-top: 1px; }
.toolbar-footer { padding-left: 10px; padding-right: 10px; padding-top: 2px; }
.toolbar-borderless { border-top: 0; border-bottom: 0; }
.toolbar-actions { margin-top: 4px; margin-bottom: 3px; padding-right: 3px; padding-left: 3px; padding-bottom: 3px;}
.toolbar-actions:before, .toolbar-actions:after { display: table; content: " "; }
.toolbar-actions:after { clear: both; }
.toolbar-actions > .btn,
.toolbar-actions > .btn-group { margin-left: 4px; margin-right: 4px; }

/* -------------------------------------------------------- */
/* GRID                                                     */
/* -------------------------------------------------------- */
.grid { clear: both; padding: 0px; margin: 0px; }
.grid:before,
.grid:after { content:""; display:table; }
.grid:after { clear:both;}
.grid { zoom:1; /* For IE 6/7 */ }
        
.gr { display: block; float:left; /*margin: 1% 0 1% 0.1%;*/ margin: 2px 0 2px 0.1%; }
.gr:first-child:not(.gr-off1):not(.gr-off2):not(.gr-off3):not(.gr-off4) { margin-left: 0; }
        
.gr1 { width: 8.241%; }
.gr2 { width: 16.58%; }
.gr3 { width: 24.92%; }
.gr4 { width: 33.20%; }
.gr5 { width: 41.60%; }
.gr6 { width: 49.90%; }
.gr7 { width: 58.19%; }
.gr8 { width: 66.60%; }
.gr9 { width: 74.97%; }
.gr10 { width: 83.31%; }
.gr11 { width: 91.65%; }
.gr12 { width: 100%; }

.gr-off1 {margin-left: 8.241%; }
.gr-off2 {margin-left: 16.58%; }
.gr-off3 {margin-left: 24.92%; }
.gr-off4 {margin-left: 33.26%; }

@media (max-width: 768px) { 
    .gr-off1, .gr-off2, .gr-off3, .gr-off4 {margin-left: 0; } 
    .gr1, .gr2, .gr3, .gr4, .gr5, { width: 49.95%; }
    .gr6, .gr7, .gr8, .gr9, .gr10, .gr11, .gr12 { width: 100%; }
}

.grid_fixed { display: flex; width: 100%; }
.grid_fixed div { padding: 4px; }
.gr_auto {margin-left: 1px; margin-right: 1px; flex-grow: 1;}
.gr_f25 { min-width: 25px; max-width: 25px; }
.gr_f35 { min-width: 35px; max-width: 35px; }
.gr_f40 { min-width: 40px; max-width: 40px; }
.gr_f50 { min-width: 50px; max-width: 50px; }
.gr_f70 { min-width: 75px; max-width: 70px; }
.gr_f75 { min-width: 75px; max-width: 75px; }
.gr_f100 { min-width: 100px; max-width: 100px; }
.gr_f110 { min-width: 100px; max-width: 110px; }
.gr_f125 { min-width: 125px; max-width: 125px; }
.gr_f150 { min-width: 150px; max-width: 150px; }
.gr_f175 { min-width: 175px; max-width: 175px; }
.gr_f200 { min-width: 200px; max-width: 200px; }
.gr_f250 { min-width: 250px; max-width: 250px; }
.gr_f350 { min-width: 350px; max-width: 350px; }
.gr_f450 { min-width: 450px; max-width: 450px; }
    
.gr-foff1 { margin-left: 50px; }
.gr-foff2 { margin-left: 75px; }
.gr-foff3 { margin-left: 100px; }
.gr-foff4 { margin-left: 125px; }

.gr_masonry {column-count: var(--gr_masonry_count); column-width: calc((12 - var(--gr_masonry_count)) * 25px); }
.gr_masonry_item {display: inline-block; /*margin: 4px; */ /*width: 100%;*/}

.gr_table { width:100%; }
.gr_theader { display:table; width:calc(100% - 6px); table-layout:fixed; border-bottom: 1px solid var(--bo-2); color: var(--catch); margin-bottom: 5px;}
.gr_trow { display:table; width:100%; table-layout:fixed; }
/*.gr_trow:first-child { border-bottom: 1px solid var(--bo-2); color: var(--catch); }*/
.gr_trow:nth-child(even) { background-color: var(--bg-3); }
.gr_trow:hover{ background-color: var(--catch-darker); color: var(--tx-1); }
.gr_tcol { display:table-cell; width:100%; padding: 3px; }

/* --- From MILLIGRAM : https://milligram.io --- */
.container { margin: 0 auto; max-width: 112.0rem; padding: 0 2.0rem; position: relative; width: 100%; }
.row { display: flex; flex-direction: column; padding: 0; width: 100%; }
.row.row-no-padding { padding: 0; }
.row.row-no-padding > .column { padding: 0; }
.row.row-wrap { flex-wrap: wrap; }
.row.row-top { align-items: flex-start; }
.row.row-bottom { align-items: flex-end; }
.row.row-center { align-items: center; }
.row.row-stretch { align-items: stretch; }
.row.row-baseline { align-items: baseline; }
.row .column { display: block; flex: 1 1 auto; margin-left: 0; max-width: 100%; width: 100%; }
.row .column.column-offset-10 { margin-left: 10%; }
.row .column.column-offset-20 { margin-left: 20%; }
.row .column.column-offset-25 { margin-left: 25%; } 
.row .column.column-offset-33, .row .column.column-offset-34 { margin-left: 33.3333%; } 
.row .column.column-offset-40 { margin-left: 40%; }
.row .column.column-offset-50 { margin-left: 50%; }
.row .column.column-offset-60 { margin-left: 60%; } 
.row .column.column-offset-66, .row .column.column-offset-67 { margin-left: 66.6666%; }
.row .column.column-offset-75 { margin-left: 75%; } 
.row .column.column-offset-80 { margin-left: 80%; }
.row .column.column-offset-90 { margin-left: 90%; }
.row .column.column-10 { flex: 0 0 10%; max-width: 10%; }
.row .column.column-20 { flex: 0 0 20%; max-width: 20%; }
.row .column.column-25 { flex: 0 0 25%; max-width: 25%; }
.row .column.column-33, .row .column.column-34 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.row .column.column-40 { flex: 0 0 40%; max-width: 40%; }
.row .column.column-50 { flex: 0 0 50%; max-width: 50%; }
.row .column.column-60 { flex: 0 0 60%; max-width: 60%; }
.row .column.column-66, .row .column.column-67 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.row .column.column-75 { flex: 0 0 75%; max-width: 75%; }
.row .column.column-80 { flex: 0 0 80%; max-width: 80%; }
.row .column.column-90 { flex: 0 0 90%; max-width: 90%; }
.row .column .column-top { align-self: flex-start; }
.row .column .column-bottom { align-self: flex-end; }
.row .column .column-center { align-self: center; } 
@media (min-width: 40rem) {
  .row { flex-direction: row; margin-left: -1.0rem; width: calc(100% + 2.0rem); }
  .row .column { margin-bottom: inherit; padding: 0 1.0rem; }
}

/* -------------------------------------------------------- */
/* COMPONENTS                                               */
/* -------------------------------------------------------- */

/* ------------------------------------------------------------ Waiting */
/* HTML needed <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> */

.lds-grid { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-grid div { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--catch); animation: lds-grid 1.2s linear infinite; }
.lds-grid div:nth-child(1) { top: 8px; left: 8px; animation-delay: 0s; }
.lds-grid div:nth-child(2) { top: 8px; left: 32px; animation-delay: -0.4s; }
.lds-grid div:nth-child(3) { top: 8px; left: 56px; animation-delay: -0.8s; }
.lds-grid div:nth-child(4) { top: 32px; left: 8px; animation-delay: -0.4s; }
.lds-grid div:nth-child(5) { top: 32px; left: 32px; animation-delay: -0.8s; }
.lds-grid div:nth-child(6) { top: 32px; left: 56px; animation-delay: -1.2s; }
.lds-grid div:nth-child(7) { top: 56px; left: 8px; animation-delay: -0.8s; }
.lds-grid div:nth-child(8) { top: 56px; left: 32px; animation-delay: -1.2s; }
.lds-grid div:nth-child(9) { top: 56px; left: 56px; animation-delay: -1.6s; }
@keyframes lds-grid { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ------------------------------------------------------------ Tree */
.tree,
.tree ul { margin:0 0 0 1em; padding:0; list-style:none; position:relative; width: 100%; }
.tree ul { margin-left:.5em } 
.tree:before, .tree ul:before { content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1px solid var(--bo-2); }
.tree li { margin:0; padding:0 1.5em; line-height:1.5em; font-weight:bold; position:relative; }
.tree li:before { content:"";display:block; width:10px; height:0; border-top:1px solid var(--bo-2); margin-top:-1px; position:absolute; top:1em; left:0; }
.tree li:last-child:before { background:var(--base-bg); height:auto; top:1em; bottom:0; }
.tree_parent::before { content: "\2234"; padding-right: 4px; }
.tree_parent:hover { color: var(--catch); }
.tree_child { max-height: 0; opacity: 0; transition: max-height 0.5s, opacity 1s ; }
.tree_child_active { max-height: 100%; opacity: 1; transition: opacity 2s; }

/* ------------------------------------------------------------ Horizontal Line */
hr.smooth { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, var(--bo-3), var(--bo-5), var(--bo-3)); }
hr.catch { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, var(--bg-2), var(--catch), var(--bg-2)); }
.divider { height: 1px; overflow: hidden;background-color: var(--bo-1); }

/* ------------------------------------------------------------ Scrolling */
::-webkit-scrollbar { width: 6px; height: 3px; border-radius: 3px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: var(--bg-1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--catch); }
::-webkit-scrollbar-thumb:active { background: var(--catch); }
.scroll { overflow-y: auto; overflow-x: hidden; }

/* ------------------------------------------------------------ Modal */
.modal {
    position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden;
    transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index: 9000;
}
.modal-content {
    position: absolute;top: 50%;left: 50%; padding: 10px; transform: translate(-50%, -50%);
    background-color: var(--bg-2); border: 1px solid var(--bo-4); border-radius: 2px;
}
.show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; }

/* ------------------------------------------------------------ Upload, dependency > uploadfile.js */
.dragDropContainerClass { padding: 10px; border: 1px solid var(--bo-3); border-radius: 4px; }
.dragDropContainerClass:hover { border: 1px solid var(--catch); }

/* ------------------------------------------------------------ Group */
.group { border: 1px solid #606060; border-radius: 4px; padding: 2px; margin: 16px 2px 2px 2px; }
.group:before, .group:after { display: table; content: " "; }
.group:after { clear: both; }
.group_title {
    background-color: var(--base-bg); color: var(--catch);
    position: relative; top: -12px; display: table; font-size: 14px;
    margin-left: 8px; padding-left: 2px; padding-right: 2px;
}

/* ------------------------------------------------------------ Tabs */
ul.tabs { margin: 2px; padding: 2px; list-style: none; }
ul.tabs li{ background: none; display: inline-block; padding: 10px 15px; color: var(--tx-3); }
ul.tabs li.current{ border-bottom: 2px solid var(--catch); color: var(--tx-4); }
.tab-content { display: none; background-color: transparent; padding: 4px; border-bottom: 1px solid var(--bg-3); }
.tab-content.current { display: inherit; }

/* ------------------------------------------------------------ Progress Bar */
.progress-bar { width: 100%; padding: 2px; border: 1px solid var(--bo-3); border-radius: 3px; background-color: var(--bg-4); }	
.progress-bar-fill { display: block; height: 6px; background-color: var(--catch); border-radius: 3px; }

/* ------------------------------------------------------------ Table */
table { width: 100%; border: 0; border-collapse: separate; font-size: 12px; text-align: left; }
thead { background-color: transparent; color: var(--catch); }
tbody { background-color: transparent; color: var(--base-tx); }
.table-striped tr:nth-child(even) { background-color: var(--bg-3); }
th { border-bottom: 1px solid var(--bo-3); }
td, th { padding: 0; }

/* ------------------------------------------------------------ Toggle Switch */
.switch { position: relative; display: inline-block; width: 44px; height: 20px;}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-4); border: 1px solid var(--bo-2); border-radius: 20px; -webkit-transition: .4s;
}
.slider:before {
    position: absolute; content: ""; height: 12px; width: 12px; left: 4px; bottom: 2px;
    background-color: var(--catch); border: 1px solid var(--bo-1); border-radius: 50%; -webkit-transition: .4s; 
}
input:checked + .slider { background-color: var(--catch); }
input:checked + .slider:before { background-color: var(--bg-4); -webkit-transform: translateX(20px); }

/* ------------------------------------------------------------ Navigation */
.nav-group {  }
.nav-group-item { padding: 5px 5px 2px 10px; display: block; color: var(--tx-3); text-transform: uppercase; border: 0px; font-family: 'ft-b';  }
.nav-group-item:active, .nav-group-item.active { background-color: var(--bg-8); color: var(--catch); border: 0px;}
.nav-group-item:hover, .nav-group-item.hover { border: 0px; color: var(--catch); }
.nav-group-item i { /*color: var(--catch);*/ /*margin-right: 8px;*/ margin: 0; width: 60px; text-align: center; }
.nav-group-title { margin: 0; padding-top: 20px; margin-left: 25px; margin-bottom: 4px; border-bottom: 1px dotted var(--catch); font-family: 'ft-b'; font-size: 12px; color: var(--catch); }

/*-------------------------------------------------------------- Accordion */ 
.acc { position: relative; margin: 2px; }
.acc input { display: none; }
.acc label { border-bottom: 1px solid var(--bo-2); display: block; padding: 2px; }
.acc label:hover { color: var(--catch); border-bottom: 1px solid var(--catch); }
.acc label::after { content: "\276F"; display: block; float: right; }
.acc input[type=radio]:checked + label::after { transform: rotate(90deg); }

.acc-content { overflow: hidden; background-color: var(--bg-2); margin: 4px; padding-left: 4px; transition: all 0.45s; max-height: 0; }
.acc input[type=radio]:checked ~ .acc-content { max-height: 100vh; transition: all 0.45s; }

.acc-close { position: relative; margin-bottom: 8px; border-bottom: 1px solid var(--catch); } 
.acc-close-title { font-size: 1.5em; font-family: 'ft-b'; margin-bottom: 4px; padding-left: 8px; }
.acc-close label { float: right; margin-top: 10px; margin-right: 4px; }
.acc-close i:hover { color: var(--catch); }

/* ------------------------------------------------------------ List */
.list-group { width: 100%; list-style: none; margin: 0; padding: 0; }
.list-group * { margin: 0; }
.list-group-item { padding: 10px; font-size: 12px; border-top: 1px solid var(--bo-3); }
.list-group-item-title { padding-bottom: 4px; font-size: 14px; color: var(--catch) }
.media-object { margin-top: 3px; }
.media-object.left { margin-right: 10px; }
.media-object.right { margin-left: 10px; }
.media-body { overflow: hidden; }

/* ------------------------------------------------------------ Tags */
.tag { background-color:var(--bg-2); border-radius:20px; border:1px solid var(--bo-3); color: var(--catch); padding:4px 8px 4px 8px; margin-right:4px;}

/* ------------------------------------------------------------ Radio and Check */
input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; line-height: normal; }
input[type="radio"]{ display: none; }
input[type="radio"] + label span {
    display: inline-block; width: 14px; height: 14px; vertical-align: middle;
    border: 1px solid var(--bo-3);  border-radius: 50%; padding: 2px; margin: 0 5px;
}
input[type="radio"]:checked + label span { width: 14px; height: 14px; background: var(--catch); background-clip: content-box; }
input[type="checkbox"]{ display: none; }
input[type="checkbox"] + label span { 
    display: inline-block; width: 14px; height: 14px; vertical-align: middle;
    border: 1px solid var(--bo-3);  padding: 2px; margin:0 5px;
}
input[type="checkbox"]:checked + label span { width: 14px; height: 14px; background: var(--catch); background-clip: content-box; }

/* ------------------------------------------------------------ Fields */
input[type="text"], input[type="password"] { -webkit-user-select: auto; }
textarea { resize: vertical; }
label { display: inline-block; margin-bottom: 5px; }

select { 
    height: 25px; width: auto; -webkit-appearance:none; 
    background-image: linear-gradient(45deg, transparent 50%, var(--tx-2) 50%), linear-gradient(135deg, var(--tx-2) 50%, transparent 50%), linear-gradient(to right, var(--bo-3), var(--bo-3));
    background-position: calc(100% - 12px) 10px, calc(100% - 8px) 10px, calc(100% - 24px) 0;
    background-size: 5px 5px, 5px 5px, 1px 24px;
    background-repeat: no-repeat;
}

select:hover { 
    background-image: linear-gradient(45deg, transparent 50%, var(--catch) 50%), linear-gradient(135deg, var(--catch) 50%, transparent 50%), linear-gradient(to right, var(--bo-3), var(--bo-3));
}

/* ------------------------------------------------------------ form */
.form-control {
    background-color: var(--base-bg); border: 1px solid var(--base-bg); border: 1px solid var(--bo-3); color: var(--base-tx);
    display: inline-block; width: 100%; min-height: 20px; padding: 5px 10px; line-height: 1; outline: none; border-radius: 4px;
}
.form-group { margin-bottom: 10px; }
.form-control:hover { border: 1px solid var(--catch); }
.form-control:focus { border: 1px solid var(--catch); }
.form-group textarea { border: 1px solid var(--bo-3); }
.form-group:hover textarea { border: 1px solid var(--catch); }
.form-group label { color: var(--tx-4); font-style: italic; }

/* ------------------------------------------------------------ Buttons */
button { background-color: transparent; }
button:focus { outline: none; }

.btn {
    display: inline-block; margin-bottom: 0; line-height: 1.4; text-align: center; height: 30px;
    vertical-align: middle; border-radius: 4px; /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);*/
}
.btn_icon i { margin-right: 10px; }

.btn-default { color: var(--catch-dark); background-color: var(--bg-1); }
.btn-default:hover { color: var(--catch); }
.btn-default:active, { background-color: var(--bg-4); color: var(--catch); }
.btn-default-outline { border: 1px solid var(--bo-3); color: var(--tx-2); }
.btn-default-outline:hover { border: 1px solid  var(--catch); }
.btn-default-outline:active { border: 1px solid  var(--catch); color: var(--catch); }
.btn-default:active, .btn-dark:active, .btn-square:active { background-color: var(--bg-4); color: var(--catch); }

.btn-primary { border-color: var(--catch); color: #f0f0f0; border-bottom-color: none; background-color: var(--catch-darker); }
.btn-primary:active { background-color: var(--catch); color: var(--catch-darker); }
.btn-primary-outline { border: 1px solid var(--catch-dark); color: var(--catch); }
.btn-primary-outline:active { background-color: var(--catch-light); color: var(--catch-darker); }

.btn_80 { width: 80px; }
.btn-square { width: 120px; height: 120px; font-size: 1.3em; color: var(--tx-3); background-color: var(--bg-2); border-radius: 10px; text-align: center; }
.btn-square i { margin-bottom: 10px; }
.btn-mini { width: 28px; height: 24px; text-align: center; }
.btn-round { width: 48px; height: 48px; text-align: center; font-size: 1.3em; border-radius: 50%; }

.input-button { position:relative; }
.input-button input { height:24px; }
.input-button button { position:absolute; right:2px; top:1px; height:22px; width:28px; text-align: center; border-left: 1px solid var(--bo-2); color: var(--tx-3); }
.input-button button:hover { color: var(--catch-dark); }
.input-button button:active { color: var(--catch); }

.btn-group { position: relative; display: inline-block; vertical-align: middle; }
.btn-group .btn { position: relative; float: left; width: 80px; }
.btn-group .btn:active { background-color: var(--bg-5); }
.btn-group .btn:hover { color: var(--catch); }
.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px; }
.btn-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group .btn + .btn { border-left: 1px solid var(--bo-3); }
.btn-group .btn { color: var(--tx-2); background-color: var(--bg-3); text-align: center; }