/*---------------------- Color Variables -------------------- */
:root {
    /*---------------------- GrayBlue -------------------- */
    --bgclr-light: #a6afb6;
    --bgclr-medium: #868f96;
    --bgclr-dark: #596164;
    --bgclr-sharp: #333;
    --leftmenu-textcolor: rgba(255,255,255,.7);
    --modulebody-bgcolor: rgb(235, 235, 235);
    --table-headbgcolor: #a6afb6;    
    /*---------------------- PaperGreen -------------------- 
    --bgclr-light: #79ad95;
    --bgclr-medium: #729c82;
    --bgclr-dark: #599b7c;
    --bgclr-sharp: #333;
    --leftmenu-textcolor: rgba(255,255,255,1);
    --modulebody-bgcolor: rgb(235, 235, 235);
    --table-headbgcolor: #c5d4cb;
    /*---------------------- Golden -------------------- 
    --bgclr-light: #dfc770;
    --bgclr-medium: #cebc7a;
    --bgclr-dark: #b69f56;
    --bgclr-sharp: #333;
    --leftmenu-textcolor: rgba(255, 255, 255, 1);
    --modulebody-bgcolor: rgb(235, 235, 235);
    --table-headbgcolor: #cec080;
    /*---------------------- Pink -------------------- 
    --bgclr-light: #fdb8c4;
    --bgclr-medium: rgb(245, 122, 149);
    --bgclr-dark: #ee677d;
    --bgclr-sharp: #333;
    --leftmenu-textcolor: rgba(255,255,255,1);
    --modulebody-bgcolor: rgb(235, 235, 235);
    --table-headbgcolor: #ffb4c7;    */
}


/*---------------------- General CMS design -------------------- */
body {font-family: 'Noto Sans', sans-serif; font-size:13px; padding:0; margin:0; overflow-x:hidden;}
/*nav {box-shadow:2px 2px 2px rgba(0,0,0,.2);}*/
a {color:#5c97b8;/*#88b369;*/ transition:color .4s;}
a:hover { text-decoration:none; color:#00a1e6/*#a2c253;*/}


/*---------------------- Bootstrap Correction -------------------- */
.navbar-collapse.collapse.in {
    display: block!important;
}
.btn-group-xs > .btn, .btn-xs {
    padding:.4rem;
    font-size: .8rem;
    line-height: .5;
    border-radius: .2rem;
}


/*---------------------- Top navigation menu -------------------- */
.navbar { padding:4px 12px;}
.navbar-white-gra { z-index: 98; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); color: #666;}
.navbar-gray-gra { z-index: 98; background: linear-gradient(to bottom, rgb(165, 165, 165) 0%,rgb(102, 102, 102) 100%);  color:#333; text-shadow:1px 1px #CCC;}
.navbar-darkdark { z-index: 98; background-color: #eaf9fd; color:#666;}
.rel-nav {position:relative;width:100%;}
.abso-nav { background-color: orange; color: white; position: absolute; top:2px; left:-16px; width:calc(100% + 32px); z-index:99; box-shadow:2px 2px 2px rgba(0,0,0,.3); background-color: #343a40 !important; border-top:1px solid #4e565e}
.abso-nav .nav-item { padding-left:10px; }
.navbar-toggler-icon { background-color: wheat;}


/*---------------------- Left navigation menu -------------------- */
.leftmenu {    
    background-image: linear-gradient(to right, var(--bgclr-medium) 0%, var(--bgclr-dark) 100%);    
}
.leftmenu-contain { padding:0 0 70px 10px;}
.leftmenu h4 { font-size:20px; margin:28px 0 6px 0; color:var(--leftmenu-textcolor);}
.leftmenu h4 { padding-left:18px;}
.leftmenu .nav { border-radius:20px 0 0 20px; width:100%; padding:7px 0 5px 18px; color:var(--leftmenu-textcolor); transition:color .4s, padding-left .4s; cursor:pointer;}
.leftmenu .nav:hover { color:white; padding-left:30px;}
.nav-active {color:var(--bgclr-dark) !important; background-color:var(--modulebody-bgcolor); padding-left:16px; border-bottom: 1px solid white; box-shadow: 11px 2px 2px rgba(0,0,0,.1);}



/*---------------------- Module Body -------------------- */
#module-body { background-color: var(--modulebody-bgcolor);}



/*---------------------- General Form -------------------- */
form {width:100%;}
input[type=submit], input[type=reset]{
    padding:8px 40px; color:white; font-size:13px; border:none; 
    background: var(--bgclr-sharp);
    border-radius:17px;box-shadow: 1px 2px 2px rgba(0,0,0,.2); transition:background-color .4s, color .4s;
}
input[type=submit]:hover{background-color:#97c71e; color:white;}
input[type=checkbox] { margin:10px 5px;}
input[type=text], input[type=email], input[type=number], input[type=password], select, textarea {
    border-radius:4px;
    padding:5px 10px;
    border:1px solid #DDD;    
    width:100%;
    color:#666;
}
select {padding-left:5px;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

select::-ms-expand {display: none;}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';    
    background-image: url('../images/keyboard_arrow_down-black-18dp.svg');
    background-repeat:no-repeat;
    background-position: 98% ;   
}
input[type=password] {
    background-image: url('../images/remove_red_eye-black-18dp.svg');
    background-repeat:no-repeat;
    background-position: 98% ;
    padding-right:30px;  
    
}
label {text-transform:capitalize; color:#666; margin-bottom:.2rem; vertical-align: top;}



/*---------------------- General Table -------------------- */
thead tr {background:var(--table-headbgcolor); color:#333; font-weight: normal;}
.table th, .table td { padding:7px 8px;}



/*---------------------- add.php -------------------- */
.div_input { display:inline-block; padding:0;}


/*---------------------- list.php -------------------- */
.nav-tabs {font-size:13px; border-bottom:3px solid var(--bgclr-medium); width:100%;}
.nav-tabs li {position:relative; background-color: #333; padding:5px 18px; border-right:1px solid #444; border-radius: 10px 10px 0 0;  z-index:1;}

.nav-tabs .active {    
    background: linear-gradient(180deg, var(--bgclr-light) 0%, var(--bgclr-medium) 100%);
     z-index:2; border-right:1px solid #666;
}
.nav-tabs a{ color:#FFF;}
.nav-act {
    /*background-color: #839368;*/
    background-image: linear-gradient(to bottom, var(--bgclr-medium) 0%, var(--bgclr-light) 100%);

}
.nav-act input[type=checkbox] { margin-left:20px;}

.action-bar { min-height: 60px; padding:6px;}


.nav-act input[type=submit] { margin:0 3px; border-radius:20px; background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); color:#555;  text-shadow: 1px 1px #FFF; position: relative; top:0; transition:top .4s, background .4s; padding:3px 18px !important; box-shadow: 1px 2px 2px rgba(255,255,255,.2);}
.nav-act input[type=submit]:hover { top:-5px; background: linear-gradient(to bottom, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(225,239,119,1) 100%);}
/*.nav-act input[value='Delete'] { margin-right:30px !important; background-color: rgb(177, 89, 89); border-right:none !important; transition:background-color .4s;}*/
.nav-act input[value='Delete']:hover, .nav-act input[value='Decline']:hover, .nav-act input[value='Suspend']:hover { top:-5px; background: linear-gradient(to bottom, rgba(239,166,155,1) 0%,rgba(229,134,119,1) 50%,rgba(232,95,71,1) 51%,rgba(255,225,209,1) 100%); text-shadow: 1px 1px #E8B8B4;}

input[name='keyword'] { height: 32px; /*border-radius:16px;*/}

.list-edit { background-color: #999; padding:4px 1px 4px 4px; transition:background-color .4s;}
.list-edit:hover { background-color: #ff8c00;}

.copy_link {float:right; background:rgba(100,100,100,0.3); color:white; transition:background 0.3s; position:absolute;}
.copy_link:hover {background:rgba(100,100,100,0.6); color:white;}
.link_value {height:1px; width:1px; padding:0; border:0;/**/}
.btn-close { display:inline-block; background-image:url(../images/close.png); background-position:center; background-repeat:no-repeat; background-size:contain; width:36px; height:36px; background-color:#8c545c; border:1px solid #8c545c; box-shadow:-1px 2px 2px rgba(0,0,0,.3); text-align:center; cursor:pointer;}