:root { 
	--main-bg-color: #222831; /* Dark */ --sec-bg-color: #c1a57b; /* Gold RGB: 193/165/123 -> KML(ABGR): 647ba5c1 */ 
	--main-tx-color: #222831; /* Dark */ --sec-tx-color: white; 

  --tivee-primary: #3A647E;
  --tivee-secondary: #2D4E62;
  --tivee-tertiary: #1A2D38;
  --tivee-highlight: #54DEA7;
}
body { margin: 0 0; font-family: 'Old Standard TT', serif;}


.rainbow-headline {
    background: -webkit-linear-gradient(45deg, #ff9e00, red 35%, #b5007d 60%, #21429c 80%, #0071ff);
    background: -o-linear-gradient(45deg, #ff9e00, red 35%, #b5007d 60%, #21429c 80%, #0071ff);
    background: linear-gradient(to right, #ff9e00, red 35%, #b5007d 60%, #21429c 80%, #0071ff);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -o-background-clip: text;
    -o-text-fill-color: transparent;
    background-clip: text;
    text-fill-color:transparent
}

/* BOOTSTRAP - Individual Settings */ 
.navbar {background-color: #222831 !important; font-family: 'Oswald', sans-serif; text-transform: uppercase; border-bottom: 2px solid var(--sec-bg-color);} 
.card-header, .modal-header {background-color: var(--main-bg-color) !important; color: white !important; font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 300; text-transform: uppercase;}
.card {border-color: var(--main-bg-color) !important;}

.outline_btn {background-color: var(--main-bg-color) !important; color: white !important; border-color: white !important;font-family: 'Oswald', sans-serif; }
.outline_btn:hover {color: var(--main-bg-color) !important; background-color: white !important; border-color: var(--main-bg-color) !important}

.outline_btn_red {background-color: red !important; color: white !important; border-color: #222831 !important;font-family: 'Oswald', sans-serif; }
.outline_btn_green {background-color: green !important; color: white !important; border-color: #222831 !important;font-family: 'Oswald', sans-serif; }
.outline_btn_gold {background-color: var(--sec-bg-color) !important; color: white !important; border-color: #222831 !important;font-family: 'Oswald', sans-serif; }
.outline_btn_red:hover {color: red !important; background-color: white !important; border-color: red !important}
.outline_btn_green:hover {color: green !important; background-color: white !important; border-color: green; !important}
.outline_btn_gold:hover {color: var(--sec-bg-color) !important; background-color: white !important; border-color: var(--sec-bg-color) !important}

.tivee_btn {background-color: var(--tivee-tertiary) !important; color: white !important; border-color: black !important;font-family: 'Oswald', sans-serif; }
.tivee_btn:hover {color: var(--tivee-tertiary) !important; background-color: var(--tivee-highlight) !important; border-color: var(--tivee-tertiary) !important}

#askme_answer_menu { z-index: 99; display: inline-block; float: right; position: absolute; right: 20px; top: 90px; color: var(--sec-bg-color); font-size: 14px; text-align: right; width: 200px; overflow-y: hidden; overflow-wrap: break-word; }
#blackout { display: none; position: absolute; width: 229px; height: 1600px; right: 0px; top: 69px; background-color: #222831; }

/* GENERAL - Topper */
.logged_user { color: white;}
.user_name, .company_name  { text-align: right; }
.user_name { font-size: 16px; }
.company_name { font-size: 10px; } 
#profilePicture { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--sec-bg-color); right: 10; display: block; }

/* GENERAL - Closing Footer */
.closer { height: 30px; background-color: var(--main-bg-color); border-top: var(--sec-bg-color) solid 3px; font-family: Oswald, sans-serif; width: 100%; margin: 20 0 0 0;}
.footer { color: white; font-size: 11px; text-align: center; margin-top: 8px; }

/* GENERAL - Back to top */
.btt { display: none; position: fixed; bottom: 40px; right: 20px; background: var(--main-bg-color); height: 30px; width: 30px; border-radius: 3px; border: 1px solid var(--sec-bg-color);
  text-align: center; color: var(--sec-tx-color); font-size: 24px; font-weight: bold; }
.btt a:visited, a:link { color: white; text-decoration: none; }
.btt a { text-decoration: none; margin-bottom: 5px; }
.btt a:hover { color: var(--sec-bg-color) !important; text-decoration: none !important; }

/*GENERAL - Content Pages*/
.headline { font-size: 38px; font-family: 'Old Standard TT', serif; margin-bottom: 15px; margin-left: -3px; }
.sub_headline { font-size: 20px; font-family: Oswald, sans-serif; margin-bottom: 10px; margin-top: 10px; font-style: normal; }

/* DASHBOARD - Call History */
#call_history_filter, #call_history_length, #call_history_info { display: none; }
#zattoo_432_length, #zattoo_453_length, #zattoo_461_length, #zattoo_462_length, #zattoo_subs_length { display: none; }
#zattoo_432_filter, #zattoo_453_filter, #zattoo_461_filter, #zattoo_462_filter, #zattoo_subs_filter { display: none; }
#zattoo_432_info, #zattoo_453_info, #zattoo_461_info, #zattoo_462_info, #zattoo_subs_info { display: none; }
#zattoo_432_paginate, #zattoo_453_paginate, #zattoo_461_paginate, #zattoo_462_paginate, #zattoo_subs_paginate { display: none; }
#gs_summary_info, #gs_summary_length, #gs_summary_filter, #gs_summary_paginate { font-size: 0.75em; }


/* DASHBOARD -Zattoo Support */
#support_mailbox td {  }
#support_body td { overflow: hidden; }
#support_mailbox_filter, #support_mailbox_length, #support_mailbox_info { display: none; }


/* DASHBOARD - Ask me anything */
#askme_answer div { display: block; }

/* DASHBOARD - Zahlen Daten Fakten */
.zdf_frame { display: flex; flex-wrap: wrap; justify-content: space-around; text-align: justify; }
.zdf_details { margin: 0; border: 0px solid black; text-align: center; width: 150px; height: 80px; }
.zdf_details_num { margin-top: -15px; margin-bottom: -8px; font-size: 30px; font-weight: bold; color: var(--sec-bg-color); }


/* DASHBOARD - Switch Board */
.incoming_call_no { font-weight: bold; color: var(--sec-bg-color); text-align: center; font-size: 0.5em;  word-wrap: normal;}
.incoming_call_comp { font-weight: normal; color: var(--sec-bg-color); text-align: center; font-size: 0.5em; word-wrap: normal; }
.status_free { border: 1px solid var(--sec-bg-color); border-radius: 50%; height: 30px; width: 30px; background-color: none; margin-bottom: 4px; }
.status_busy { border: 1px solid var(--main-bg-color); background-color: var(--main-bg-color); border-radius: 50%; height: 25px; width: 25px; margin-bottom: 4px; }


/* MEMBER MVZ - Layout */
.mvz_table { font-size: 20px; width: 100%}
.mvz_table tr { height: 1.5em; border-bottom: 0.5px solid #c1a57b; }
.mvz_category { margin: 0; width: 100%}
.mvz_table tbody tr { height: 1.5em; }
.reach_summary { font-size: 10px; }
.contact_details { font-size: 0.8em; }

.switchboard { display: block; justify-content: space-around;   }

/* ZATTOO INVOICING SUB-PAGE */
#zattoo_invoices a:link {color: var(--main-tx-color) !important; text-decoration: underline;}
#zattoo_invoices a:visited {color: var(--main-tx-color) !important; text-decoration: underline;}
#zattoo_invoices a:hover {color: var(--sec-bg-color) !important; text-decoration: underline;}


/*CUSTOM SWITCH TOGGLE*/

 #crawl_switch:focus ~ #crawl_label::before {
/* when the button is toggled off it is still in focus and a violet border will appear */
    border-color: var(--sec-bg-color) !important;
    /* box shadow is blue by default but we do not want any shadow hence we have set all the values as 0 */
    box-shadow:
      0 0 0 0rem rgba(0, 0, 0, 0) !important;
}
  
/*sets the background color of switch to violet when it is checked*/
#crawl_switch:checked ~ #crawl_label::before {
    border-color: var(--sec-bg-color) !important;
    background-color: var(--sec-bg-color) !important;
}
  
/*sets the background color of switch to violet when it is active*/
#crawl_switch:active ~ #crawl_label::before {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--sec-bg-color) !important;
}
  
/*sets the border color of switch to violet when it is not checked*/
#crawl_switch:focus:not(:checked) ~ #crawl_label::before {
    border-color: var(--sec-bg-color) !important;
}


/* RESPONSIVE - 1000 px */
@media screen and (max-width: 1000px) {
.switchboard { display: flex; justify-content: space-around; }
  }
}
}

/* RESPONSIVE - 1440 */
@media screen and (max-width: 1440px) { 

 
}

/* RESPONSIVE - 1920 */
@media screen and (max-width: 1920px) { 

}