@charset "utf-8"; /* CSS Document */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { font-family: "Montserrat", sans-serif; /* Google Fonts. */ font-size: 16px; font-style: normal; line-height: 22px; font-weight: normal; font-variant: normal; text-transform: none; color: #000000; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; overflow-x: hidden; /* Disable horizontal scroll. */ } img { max-width: 100%; height: auto; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } h1, h2, h3, h4, h5, h6, p, ul, ol { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } a:link, a:visited { color: #6E6EFF; text-decoration: none; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* Specifies a transition effect with a slow start, then fast, then end slowly */ } a:hover { color: #000000; } a:active { color: #FF8C00; } /* |||||||||||||||||||||||||||| GENERAL LAYOUT ||||||||||||||||||||||||||| */ /* The menu JavaScript adds the no-scroll class to the or element when the menu is opened. The CSS rule then sees this class and applies overflow: hidden;, which is the command that hides the scrollbars and prevents any scrolling. When the menu is closed, the JavaScript removes the class, and the page's normal scrolling behavior returns. */ html.no-scroll, body.no-scroll { overflow: hidden; } #image_wrap_div { background-repeat: no-repeat; background-position: center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* Vertically centers the items. */ text-align: center; height: 100vh; width: 40%; padding-right: 5%; padding-left: 5%; position: fixed; top: 0px; left: 0px; z-index: 1; text-shadow: 1px 1px 2px #000000, 0px 0px 10px #666666, 0px 0px 2px #999999; -webkit-animation: fadein 2s ease forwards; animation: fadein 2s ease forwards; } #image_wrap_div::before { /* To darken the image with div on top. */ background-color: rgba(0, 0, 0, 0.1); height: 100vh; width: 100%; content: ''; position: absolute; top: 0px; left: 0px; z-index: 1; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #content_wrap_div { background-color: #F4F4F4; width: 60%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 40%; /* It has to be the width of the #image_wrap_div. */ position: relative; overflow-y: auto; z-index: 2; -webkit-box-shadow: -10px 0px 20px rgba(0, 0, 0, 1); box-shadow: -10px 0px 20px rgba(0, 0, 0, 1); } #content_div { margin-top: 0px; margin-right: 90px; margin-bottom: 60px; margin-left: 80px; } #language_change_div { background-color: rgba(255, 255, 255, 0.5); width: 120px; padding-top: 2px; padding-bottom: 2px; border: 1px solid #333333; position: absolute; top: 20px; left: 20px; z-index: 2; border-radius: 5px 5px 5px 5px; } #logo_div { width: 100%; margin-bottom: -20px; z-index: 2; } #logo_img { width: 60%; } #message_div { font-size: 24px; line-height: 30px; font-weight: bold; color: #FFFFFF; width: 100%; z-index: 2; } #slogan { color: #B3B3FF; } #footer_div { font-size: 14px; line-height: 20px; color: #181818; background-color: #E6E8FF; background: -o-radial-gradient(circle,rgba(245, 246, 255, 1) 0%, rgba(204, 207, 255, 1) 100%); background: radial-gradient(circle,rgba(245, 246, 255, 1) 0%, rgba(204, 207, 255, 1) 100%); text-align: center; height: auto; width: 100%; padding-top: 50px; padding-right: 40px; padding-bottom: 50px; padding-left: 40px; border-top-width: 1px; border-top-style: solid; border-top-color: #B3B8FF; } .clients_portfolio_div { display: -ms-grid; display: grid; row-gap: 0rem; -webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem; grid-template-columns: repeat(auto-fill, minmax(46%,1fr)); margin-top: 0px; } .clients_portfolio_div h2 { font-size: 20px; line-height: 20px; color: #B3B3FF; text-align: left; padding-bottom: 10px; padding-left: 30px; margin-bottom: 10px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #D4D4D4; } .clients_portfolio_group_div { font-size: 18px; line-height: 24px; color: #7F7F7F; padding-left: 30px; } #websites_main_div { display: -ms-grid; display: grid; row-gap: 2rem; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(46%,1fr)); margin-top: 24px; } .website_image_div { color: #999999; width: 100%; margin-bottom: 40px; /* This will be overridden below for newer browsers. */ } @supports (display: grid) { .website_image_div { margin-bottom: 0px; /* Newer browsers will override. */ } } .website_image { width: 100%; float: left; border-radius: 4px 4px 4px 4px; } .highlight_text { color: #FF8C00; } .align_left { text-align: left; } .align_center { text-align: center; } .align_right { text-align: right; } .alert_message { font-size: 14px; line-height: 14px; color: #E50000; text-align: center; display: block; width: 100%; margin-top: 6px; } .alert_message_newsletter { color: #FF8C00; } @-webkit-keyframes blink_two_colors { 0%, 100% { color: #FFFFFF; } 50% { color: #041E42; } } @keyframes blink_two_colors { 0%, 100% { color: #FFFFFF; } 50% { color: #041E42; } } .blinking-text { -webkit-animation: blink_two_colors 1s infinite; animation: blink_two_colors 1s infinite; } /* ||||||||||||||||||||||||||||||| COOKIES ||||||||||||||||||||||||||||||| */ #layout_cookies_div { font-size: 14px; line-height: 18px; color: #FFFFFF; background-color: rgba(24, 24, 24, 1); background: -webkit-gradient(linear, right top, left bottom, from(rgba(24, 24, 24, 0.90)), to(rgba(51, 51, 51, 0.90))); background: -o-linear-gradient(top right, rgba(24, 24, 24, 0.90), rgba(51, 51, 51, 0.90)); background: linear-gradient(to bottom left, rgba(24, 24, 24, 0.90), rgba(51, 51, 51, 0.90)); text-align: center; display: none; width: 60%; padding-top: 20px; padding-right: 10%; padding-bottom: 20px; padding-left: 10%; border-top-width: 1px; border-top-style: solid; border-top-color: #666666; border-right-width: 1px; border-right-style: solid; border-right-color: #666666; border-left-width: 1px; border-left-style: solid; border-left-color: #666666; position: fixed; bottom: 0px; right: 0px; z-index: 1000; -webkit-box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.6); box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.6); } /* ::::::::::::::::::::::::::::::: COOKIES ::::::::::::::::::::::::::::::: */ /* |||||||||||||||||||||||| SCROLL DOWN INDICATOR |||||||||||||||||||||||| */ .scroll_down_div { display: none; position: absolute; top: 80%; left: 50%; z-index: 3; cursor: pointer; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0);} 40% {-webkit-transform: translateX(-50%) translateY(10px);transform: translateX(-50%) translateY(10px);} 60% {-webkit-transform: translateX(-50%) translateY(5px);transform: translateX(-50%) translateY(5px);} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0);} 40% {-webkit-transform: translateX(-50%) translateY(10px);transform: translateX(-50%) translateY(10px);} 60% {-webkit-transform: translateX(-50%) translateY(5px);transform: translateX(-50%) translateY(5px);} } /* :::::::::::::::::::::::: SCROLL DOWN INDICATOR :::::::::::::::::::::::: */ h1 { font-size: 50px; line-height: 50px; color: #000000; font-weight: bold; text-align: center; width: 100%; margin-top: 50px; margin-bottom: 50px; } h2 { font-size: 32px; line-height: 32px; color: #B3B3FF; font-weight: bold; text-align: center; width: 100%; margin-top: 40px; margin-bottom: 20px; } p { margin-bottom: 16px; } ul, ol { margin-top: 20px; margin-right: 10px; margin-bottom: 10px; margin-left: 20px; } li { margin-top: 4px; margin-bottom: 4px; } .e { font-weight: bold; color: #6E6EFF; display: inline-block; position: relative; top: -0.16em; } .syntax { font-weight: bold; color: #000000; } a.language:link, a.language:visited { color: #FFFFFF; } a.language:hover { color: #FF8C00; } a.language:active { color: #6E6EFF; } a.social_media:link, a.social_media:visited { font-size: 30px; color: #181818; } a.social_media:hover { color: #6E6EFF; } a.social_media:active { color: #FF8C00; } a.website_image:link, a.website_image:visited, a.website_image:active { width: 100%; margin-bottom: 10px; border: 1px solid #FFFFFF; -webkit-box-shadow: 0px 0px 4px 2px #999999; box-shadow: 0px 0px 4px 2px #999999; } a.website_image:hover { opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */ -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; /* Animation */ -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); -webkit-box-shadow: 0px 0px 4px 2px #9999FF; box-shadow: 0px 0px 4px 2px #9999FF; } /* |||||||||||||||||||||||||||||||| FORMS |||||||||||||||||||||||||||||||| */ #heading_upload_file_div { font-size: 14px; line-height: 14px; color: #666666; display: block; width: 100%; margin-top: 40px; margin-bottom: 8px; } #form_quote, #form_upload { width: 100%; margin-right: auto; margin-left: auto; } #form_quote { display: -webkit-box; display: -ms-flexbox; display: flex; /* Make the form a flex container. */ -ms-flex-wrap: wrap; flex-wrap: wrap; /* Allow items to wrap to the next line. */ gap: 2%; /* Add a gap between the columns. */ margin-bottom: -16px; } .form_row, .form_row_left, .form_row_right { width: 49%; padding-top: 0px; padding-right: 0px; padding-botom: 0px; padding-left: 0px; margin-bottom: 20px; } .form_row { width: 100%; /* For full-width elements like the textarea overriding the above 49%. */ } .form_row_right .inputfield_form_code { width: calc(80% - 0px); display: inline-block; } #form_code_div { line-height: 28px; color: #CCCCFF; background-color: #6E6EFF; text-align: center; height: 28px; width: 20%; float: right; /* This is needed because the parent element, .form_row_right, is not a flex container, and its child elements are not being aligned by a modern layout method. The float property takes this div out of the normal document flow and aligns it to the right within its container. */ padding-top: 0px; padding-right: 0px; padding-botom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-botom: 0px; margin-left: 0px; border: 1px solid #AAAAAA; border-radius: 4px 4px 4px 4px; } select:focus, input:focus, textarea:focus { background-color: #F5F6FF; } .inputfield_login, .inputfield_general, .inputfield_select_colored, .inputfield_upload_file, .inputfield_select, .inputfield_select_segments, .inputfield_textarea, .inputfield_form_code { font-family: "Montserrat", sans-serif; /* Google Fonts. */ font-size: 14px; color: #666666; height: 28px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border: 1px solid #999999; border-radius: 4px 4px 4px 4px; } .inputfield_login { background-color: #424242; width: 100%; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; margin-top: 8px; margin-bottom: 8px; } .inputfield_general { width: 100%; } .inputfield_select_colored { width: 100%; } .inputfield_select { width: 100%; padding-left: 6px; } .inputfield_select_segments { width: auto; max-width: 100%; padding-left: 6px; } .inputfield_textarea { height: 120px; width: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .inputfield_form_code { width: 80%; } .inputfield_upload_file { width: 68%; padding-left: 0px; } .quotation_message_div { background-color: #E6E8FF; background: -o-radial-gradient(circle,rgba(245, 246, 255, 1) 0%, rgba(204, 207, 255, 1) 100%); background: radial-gradient(circle,rgba(245, 246, 255, 1) 0%, rgba(204, 207, 255, 1) 100%); width: 100%; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 0px; margin-bottom: 40px; border: 1px solid #B3B8FF; border-radius: 10px 10px 10px 10px; } /* :::::::::::::::::::::::::::::::: FORMS :::::::::::::::::::::::::::::::: */ /* ||||||||||||||||||||||||||||| UPLOAD BUTTON ||||||||||||||||||||||||||| */ #button_upload { color: #FFFFFF; background-color: #0A0A0A; width: 30%; float: right; padding-top: 4px; padding-bottom: 4px; border: 1px solid #FFFFFF; cursor: pointer; border-radius: 4px 4px 4px 4px; -webkit-box-shadow: 0px 0px 3px 2px #999999; box-shadow: 0px 0px 3px 2px #999999; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #button_upload:hover { background-color: #333333; } #button_upload:active { background-color: #FF8C00; } /* ::::::::::::::::::::::::::::: UPLOAD BUTTON ::::::::::::::::::::::::::: */ /* |||||||||||||||||||||||||| AJAX - PROGRESSBAR ||||||||||||||||||||||||| */ /* Style the entire progress bar container */ progress { height: 10px; width: 100%; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; margin-top: 4px; margin-top: 4px; margin-bottom: 0px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3); } /* Style the background of the bar */ progress::-webkit-progress-bar { background: #0A2036; border-radius: 50px 50px 50px 50px; } progress { background-color: #0A2036; border-radius: 50px 50px 50px 50px; } /* Style the filled-in part of the bar */ progress::-webkit-progress-value { background: #6E6EFF; border-radius: 50px 50px 50px 50px; } progress::-moz-progress-bar { background: #6E6EFF; border-radius: 50px 50px 50px 50px; } #status { font-size: 14px; line-height: 14px; text-transform: uppercase; color: #6E6EFF; text-align: center; display: block; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #loaded_n_total { display: none; } /* :::::::::::::::::::::::::: AJAX - PROGRESSBAR ::::::::::::::::::::::::: */ /* |||||||||||||||||||||||||||| SUBMIT BUTTONS ||||||||||||||||||||||||||| */ input[type=submit]#accept_cookies { text-transform: uppercase; width: auto; padding-right: 10px; padding-left: 10px; } input[type=submit] { color: #FFFFFF; background-color: #0A0A0A; width: 100%; padding-top: 4px; padding-bottom: 4px; border: 1px solid #FFFFFF; cursor: pointer; border-radius: 4px 4px 4px 4px; -webkit-box-shadow: 0px 0px 3px 2px #999999; box-shadow: 0px 0px 3px 2px #999999; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* Specifies a transition effect with a slow start, then fast, then end slowly */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=submit]:hover { color: #CCCCCC; background-color: #333333; } input[type=submit]:active { color: #FFFFFF; background-color: #FF8C00; } /* :::::::::::::::::::::::::::: SUBMIT BUTTONS ::::::::::::::::::::::::::: */ /* :::::::::::::::::::::::::::: GENERAL LAYOUT ::::::::::::::::::::::::::: */ /* |||||||||||||||||||||||||||||| MENU ICON |||||||||||||||||||||||||||||| */ .menu_icon_div { background-color: #FFFFFF; height: 45px; width: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; /* Sets the display type to Flexbox. */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* Arranges flex items vertically. */ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* Distributes space evenly between flex items. */ padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; position: fixed; top: 20px; right: 20px; z-index: 3; cursor: pointer; -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); border-radius: 5px 5px 5px 5px; } .line { background-color: #808080; display: block; height: 5px; border-radius: 3px 3px 3px 3px; -webkit-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .menu_icon_div:hover .line { background-color: #FF8C00; } .menu_icon_div:active .line { background-color: #6E6EFF; } /* :::::::::::::::::::::::::::::: MENU ICON :::::::::::::::::::::::::::::: */ /* ||||||||||||||||||||||||||| SIDE MENU STYLE ||||||||||||||||||||||||||| */ #side_menu_div { background-color: rgba(24, 24, 24, 1); background: -o-radial-gradient(circle,rgba(51, 51, 51, 1) 0%, rgba(24, 24, 24, 1) 100%); background: radial-gradient(circle,rgba(51, 51, 51, 1) 0%, rgba(24, 24, 24, 1) 100%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 100%; width: 60%; padding-right: 14%; padding-left: 14%; border-left-width: 1px; border-left-style: solid; border-left-color: #666666; position: fixed; top: 0px; right: -70%; /* Hides the menu initially. */ z-index: 4; /* This is the key change. */ overflow-y: auto; -webkit-box-shadow: -5px 0px 8px rgba(0, 0, 0, 0.6); box-shadow: -5px 0px 8px rgba(0, 0, 0, 0.6); -webkit-transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; transition: right 0.4s ease-in-out; } #side_menu_div.open { right: 0px; /* Slides the menu into view. */ } /* Close Button */ .cpanel_close_btn, .close_btn { font-size: 20px; font-weight: bold; color: #FF8C00; text-align: right; width: auto; margin-top: 18px; cursor: pointer; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* Specifies a transition effect with a slow start, then fast, then end slowly. */ } .cpanel_close_btn { position: relative; right: 0px; } .close_btn { position: absolute; top: 15px; right: 50px; } .cpanel_close_btn:hover, .cpanel_close_btn:focus { color: #6E6EFF; } .cpanel_close_btn:active { color: #E6E6FF; } .close_btn:hover, .close_btn:focus { color: #6E6EFF; } .close_btn:active { color: #E6E6FF; } /* Close Button */ /* Navigation */ #side_menu_content_div { width: 100%; } h2.side_menu_header { font-size: 22px; line-height: 22px; color: #EAEAEA; text-align: left; width: 100%; margin-top: 60px; margin-bottom: 10px; } a.side_menu_navigation:link, a.side_menu_navigation:visited { font-size: 18px; line-height: 38px; color: #8C8C8C; text-align: left; display: block; min-height: 38px; width: 100%; padding-right: 10px; padding-left: 20px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #464646; } a.side_menu_navigation:hover { color: #6E6EFF; background-color: #333333; } a.side_menu_navigation:active { color: #FF8C00; } a.side_menu_navigation_active:link, a.side_menu_navigation_active:visited, a.side_menu_navigation_active:hover, a.side_menu_navigation_active:active { font-size: 18px; line-height: 38px; color: #FF8C00; background-color: #333333; text-align: left; display: block; min-height: 38px; width: 100%; padding-right: 10px; padding-left: 20px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #464646; } .fa-chevron-right { float: right; margin-top: 10px; } /* Navigation */ /* ::::::::::::::::::::::::::: SIDE MENU STYLE ::::::::::::::::::::::::::: */ /* ||||||||||||||||||||||||||||| cPANEL LOGIN |||||||||||||||||||||||||||| */ #cover_cpanel_login_div, #cpanel_login_div { color: #FFFFFF; background-color: #181818; text-align: right; display: none; /* Hidden by default */ width: 100%; padding-top: 20px; padding-bottom: 40px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; } #cover_cpanel_login_div { padding-right: 16%; padding-left: 16%; } #cpanel_login_div { padding-right: 30%; padding-left: 30%; } #login_heading_div { text-align: center; width: 100%; margin-top: -22px; } #cpanel_form_login { margin-top: 40px; } .login_messages_div, #success_message_login { font-size: 14px; line-height: 14px; color: #FF8C00; text-align: center; width: 100%; margin-top: 0px; margin-bottom: 10px; } #success_message_login { color: #6E6EFF; } #cpanel_submit { color: #FFFFFF; text-transform: uppercase; background-color: #0A0A0A; width: 100%; padding-top: 4px; padding-bottom: 4px; margin-top: 0px; border: 1px solid #FFFFFF; cursor: pointer; border-radius: 4px 4px 4px 4px; -webkit-box-shadow: 0px 0px 3px 2px #999999; box-shadow: 0px 0px 3px 2px #999999; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #cpanel_submit:hover { color: #CCCCCC; background-color: #333333; } #cpanel_submit:active { color: #FFFFFF; background-color: #FF8C00; } /* ::::::::::::::::::::::::::::: cPANEL LOGIN :::::::::::::::::::::::::::: */ /* ||||||||||||||||||||||||||| JQUERY VALIDATE ||||||||||||||||||||||||||| */ div.error { font-size: 10px; line-height: 10px; text-transform: uppercase; color: #E50000; margin-top: 2px; margin-bottom: -12px; margin-left: 10px; } .checkboxes_div div.error { float: right; margin-top: -15px; margin-left: 4px; } #newsletter div.error { font-size: 10px; line-height: 10px; text-transform: uppercase; color: #FFFFFF; background-color: rgba(255, 89, 0, 0.8); text-align: center; padding-left: 10px; padding-top: 14px; padding-right: 10px; padding-bottom: 14px; border: 1px solid #FFFFFF; position: absolute; top: 514px; left: 44.85%; z-index: 1; -webkit-box-shadow: 0px 0px 6px 2px #999999; box-shadow: 0px 0px 6px 2px #999999; border-radius: 6px 6px 6px 6px; } /* ::::::::::::::::::::::::::: JQUERY VALIDATE ::::::::::::::::::::::::::: */ /* ||||||||||||||||||||||||||||||||| BLOG |||||||||||||||||||||||||||||||| */ /* BLOG POSTS LIST */ #select_post_div { text-align: right; width: 100%; margin-bottom: 32px; /* This will be overridden below for newer browsers. */ } @supports (display: grid) { #select_post_div { margin-bottom: 0rem; /* Newer browsers will override. */ } } #browse_post_title { font-size: 14px; line-height: 14px; font-variant: small-caps; color: #000000; text-align: center; margin-right: 5px; } .selection_form { display: inline; } .select_posts_left, .select_posts_right { font-size: 14px; line-height: 14px; font-variant: small-caps; background-color: #FF8C00; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border: 1px solid #FFFFFF; border-radius: 4px 4px 4px 4px; } .option_type { font-size: 16px; color: #FFFFFF; background-color: #000000; } option { background-color: #E0E2FF; } .select_posts_left { margin-right: 0px; margin-left: 0px; } .select_posts_right{ margin-right: 0px; margin-left: 0px; } #blog_main_div { display: -ms-grid; display: grid; row-gap: 2rem; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(31%,1fr)); } .post_div { background-color: #FFFFFF; padding-top: 0px; padding-bottom: 0px; margin-bottom: 32px; /* This will be overridden below for newer browsers. */ border: 12px solid #FFFFFF; -webkit-box-shadow: 0px 3px 6px 1px #9999FF; box-shadow: 0px 3px 6px 1px #9999FF; border-radius: 0px 0px 12px 12px; } @supports (display: grid) { .post_div { margin-bottom: 0px; /* Newer browsers will override. */ } } .fullwidth { grid-column: 1 / -1; /* Make specific posts span full row */ } .post_main_images_div { background-color: #EEEEEE; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100px; width: 100%; border-radius: 0px 0px 0px 0px; } .post_title { font-size: 16px; line-height: 18px; font-weight: bold; color: #CCCCFF; background-color: #434577; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 49px; width: 100%; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; margin-top: 0px; margin-bottom: 6px; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCFF; border-bottom-width: 0px; border-bottom-style: none; border-bottom-color: transparent; text-shadow: 1px 1px 2px #000000, 0px 0px 10px #666666, 0px 0px 2px #999999; } .post_content_div { font-size: 16px; line-height: 16px; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .post_read_date { width: 100%; padding-top: 10px; margin-top: 10px; margin-bottom: 30px; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } .post_read_date_left { height: 18px; width: 50%; float: left; margin-top: 4px; } .post_read_date_right { font-size: 14px; line-height: 18px; color: #747474; text-align: right; height: 18px; width: 50%; float: left; padding-top: 0px; margin-top: 4px; } #no_posts_message { font-size: 20px; line-height: 20px; color: #A4A4A4; text-align: center; grid-column: 1 / -1; /* Span full row */ margin-top: 28px; } #post_prev_next_div { font-size: 32px; color: #CCCCCC; background-color: #E6E8FF; background: -o-radial-gradient(circle,rgba(245, 246, 255, 1) 0%, rgba(204, 207, 255, 1) 100%); background: radial-gradient(circle,rgba(245, 246, 255, 1) 0%, rgba(204, 207, 255, 1) 100%); text-align: center; max-width: 144px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; margin-top: 50px; margin-right: auto; margin-left: auto; border: 1px solid #FFFFFF; -webkit-box-shadow: 0px 0px 3px 2px #999999; box-shadow: 0px 0px 3px 2px #999999; border-radius: 150px 150px 150px 150px; } #pages_count_div { font-size: 12px; color: #999999; text-align: center; width: 100%; margin-top: 10px; } a.read_post:link, a.read_post:visited { font-size: 14px; line-height: 20px; color: #FFFFFF; text-decoration: none; background-color: #6E6EFF; text-align: center; height: 20px; width: 60px; float: left; padding-right: 4px; padding-bottom: 20px; border: 1px solid #FFFFFF; -webkit-box-shadow: 0px 0px 3px 2px #999999; box-shadow: 0px 0px 3px 2px #999999; border-radius: 0px 150px 150px 0px; } a.read_post:hover { background-color: #113961; } a.read_post:active { background-color: #FF8C00; } /* BLOG POSTS LIST */ /* POSTS */ #main_post_div { width: 100%; padding-top: 0px; padding-bottom: 0px; margin-right: 0%; margin-left: 0%; } #post_main_image { height: auto; width: 100%; margin-top: 20px; margin-right: 0%; margin-left: 0%; border-radius: 10px 10px 0px 0px; } #main_post_title { font-size: 28px; line-height: 28px; font-weight: normal; font-variant: normal; color: #CCCCFF; background-color: #37377F; text-align: center; /* display: inline; */ width: 100%; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; margin-top: -6px; margin-bottom: 10px; margin-left: 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCFF; text-shadow: 1px 1px 2px #000000, 0px 0px 10px #666666, 0px 0px 2px #999999; border-radius: 0px 0px 0px 0px; } #main_post_classification_div { font-size: 16px; line-height: 20px; color: #747474; background-color: #CCCCFF; text-align: center; width: 100%; padding-top: 8px; padding-right: 20px; padding-bottom: 8px; padding-left: 20px; border-radius: 0px 0px 10px 10px; } #main_post_author_date { font-size: 14px; line-height: 14px; color: #747474; text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; width: 100%; margin-top: 10px; margin-bottom: 34px; } .avatar_images { height: auto; width: 30px; border-radius: 150px 150px 150px 150px; } #main_post_content { width: 100%; } .post_h2 { font-size: 22px; line-height: 22px; color: #B3B3FF; width: 100%; margin-top: 30px; margin-bottom: 10px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999999; } .post_h3 { font-size: 20px; line-height: 22px; color: #B3B3B3; width: 100%; margin-top: 30px; margin-bottom: 10px; } .post_image { height: auto; width: 70%; margin-top: 10px; margin-right: 15%; margin-bottom: 20px; margin-left: 15%; } .youtube_container { background: #000000; height: 0px; max-width: 70%; padding-bottom: 39.38%; /* if max-width: 100%, this has to be 56.25%. if max-width: 60%, this has to be 33.75%. */ margin-right: 15%; margin-left: 15%; position: relative; overflow: hidden; } .iframe_youtube { height: 100%; width: 100%; border: 0px; position: absolute; top: 0px; left: 0px; } hr { background-color: #CCCCCC; height: 1px; margin-top: 40px; margin-bottom: 40px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .post_highlight_text { background-color: #E6FFB3; padding-right: 6px; padding-left: 6px; } pre { color: #EDEDED; background: -webkit-gradient(linear, right top, left bottom, from(#000000), color-stop(#333333), to(#666666)); background: -o-linear-gradient(top right, #000000, #333333, #666666); background: linear-gradient(to bottom left, #000000, #333333, #666666); padding-top: 14px; padding-right: 16px; padding-bottom: 14px; padding-left: 16px; overflow-y: hidden; overflow-x: auto; text-shadow: 1px 1px 2px #000000, 0px 0px 10px #666666, 0px 0px 2px #999999; border-radius: 10px 10px 10px 10px; } /* Styling the scrollbar directly on the

 tag. */
pre::-webkit-scrollbar {
	height: 10px;
}
pre::-webkit-scrollbar-track {
	background: #CCCCFF;
}
pre::-webkit-scrollbar-thumb {
	background: #6E6EFF;
	
    border-radius: 5px 5px 5px 5px;
}
pre::-webkit-scrollbar-thumb:hover {
	background: #5858CC;
}
a.back:link, a.back:visited {
	font-size: 12px;
	line-height: 20px;
	color: #FFFFFF;
	text-decoration: none;
    text-transform: uppercase;
	background-color: #FF8C00;
	display: block;
	text-align: center;
	height: auto;
	width: 90px;
	padding-left: 4px;
	margin-top: 20px;
	border: 1px solid #FFFFFF;
	
	-webkit-box-shadow: 0px 0px 4px 1px #A4A4A4;
	
	        box-shadow: 0px 0px 4px 1px #A4A4A4;

	border-radius: 150px 0px 0px 150px;
}
a.back:hover {
	background-color: #113961;
}
a.back:active {
	background-color: #6E6EFF;
}
/* POSTS */

/* ::::::::::::::::::::::::::::::::: BLOG :::::::::::::::::::::::::::::::: */




/* ||||||||||||||||||||||||||| PANEL FUNCTIONS ||||||||||||||||||||||||||| */
#session_user_data_div {
    font-size: 14px;
	line-height: 14px;
	text-align: center;
	width: 100%;
	margin-top: 0px;
}
.functions_type_div {
	font-size: 32px;
	line-height: 32px;
	color: #B3B3FF;
	font-weight: bold;
	text-align: center;
    width: 100%;
	margin-top: 60px;
	margin-bottom: 30px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
}
.panel_functions_div {
    display: -ms-grid;
    display: grid;
    row-gap: 2rem;
	-webkit-column-gap: 2rem;
	   -moz-column-gap: 2rem;
	        column-gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(48%,1fr));
}
#functions_wrap_div {
    padding-right: 20%;
	padding-left: 20%;
}
#functions_div {
    min-height: 700px;
	
	-webkit-animation: fadein 2s ease forwards;
	
	        animation: fadein 2s ease forwards;
}
#panel_functions_session_alert_div {
    color: #FF8C00;
	text-align: center;
	width: 100%;
	margin-top: 255px;
	margin-bottom: 260px;
}
.system_messages, .system_messages_alert {
	text-align: center;
	min-height: 60px;
	width: 100%;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	margin-top: 0px;
	margin-bottom: 40px;
	border: 1px solid #FFFFFF;
	
	-webkit-box-shadow: 0px 0px 5px 2px #A4A4A4;
	
	        box-shadow: 0px 0px 5px 2px #A4A4A4;

	border-radius: 10px 10px 10px 10px;
}
.system_messages {
	color: #FFFFFF;
	background-color: #339966;
}
.system_messages_alert {
	color: #FFFFFF;
	background-color: #FF5900;
}
#system_form, .system_form_100 {
	text-align: right;
	width: 50%;
	margin-top: 0px;
	margin-right: 25%;
	margin-bottom: 40px;
	margin-left: 25%;
}
table {
	border-collapse: separate; /* Also can be set as "collapse" which leaves no spaces between cells. */
}
.table_layout {
	width: 100%;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;

	-webkit-box-shadow: 0px 0px 5px 2px #A4A4A4;

	        box-shadow: 0px 0px 5px 2px #A4A4A4;
}
th {
	font-size: 14px;
	line-height: 14px;
	font-weight: lighter;
	color: #FFFFFF;
	background-color: #000000;
	height: 30px;
    padding-right: 10px;
    padding-left: 10px;
}
td {
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
}
.table_data {
	text-align: center;
}
.visual_order {
	text-align: center;
    width: 50px;
	padding: 0px;
}
.status {
	text-align: center;
    width: 55px;
	padding: 0px;
}
.actions_3 {
    width: 96px;
	padding: 0px;
}
.actions_4 {
    width: 128px;
	padding: 0px;
}
.data_heading {
	color: #5C5C5C;
	background-color: #D4D4D4;
	text-align: center;
}
.data_even_row, .data_odd_row {
	font-size: 12px;
	line-height: 12px;
	text-align: center;
    cursor: default;
}
.data_even_row {
	background-color: #FFFFFF;
}
.data_odd_row {
	background-color: #EEEEEE;
}
.system_form_100 {
	width: 100%;
	margin-top: 10px;
	margin-right: 0%;
	margin-bottom: 0px;
	margin-left: 0%;
}
#system_form_process {
	text-align: right;
	width: 100%;
	float: left;
	margin-top: 34px;
	margin-right: 0%;
	margin-bottom: 0px;
	margin-left: 0%;
}
#system_form_activate {
	text-align: right;
	width: 100%;
	float: left;
	margin-top: 34px;
	margin-right: 0%;
	margin-bottom: 0px;
	margin-left: 0%;
}
.form_row {
	width: 100%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}
#index_layout {
	text-align: center;
	background-color: #F4F4F4;
	width: 100%;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 26px;
	padding-left: 20px;
	margin-top: 34px;
	margin-right: 0%;
	margin-bottom: 40px;
	margin-left: 0%;
	border: 1px solid #5555AA;

    -webkit-box-shadow: 0px 0px 10px 1px #666666;

            box-shadow: 0px 0px 10px 1px #666666;
	
	border-radius: 10px 10px 10px 10px;
}
#index_heading {
    font-size: 14px;
	font-weight: lighter;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}
.total_elements {
	color: #FFFFFF;
	background-color: #6E6EFF;
	min-width: 60px;
	padding-top: 2px;
	padding-right: 8px;
	padding-bottom: 2px;
	padding-left: 8px;
	margin-top: -3px;
	margin-left: 40px;
	border: 1px solid #FFFFFF;
	
	border-radius: 150px 150px 150px 150px;
}
.checkboxes_div_100, .newsletter_checkboxes_div_100 {
	font-size: 14px;
	line-height: 23px;
	color: #FFFFFF;
    background-attachment: scroll;
    background-image: url(../backgrounds/newsletter-monitoring.jpg);
    background-repeat: no-repeat;
    background-position: center center;
													
    background-size: cover;
	
	width: 100%;
	/* float: left; */
	padding-top: 0px;
	padding-bottom: 4px;
	border: 2px solid #FFFFFF;
	overflow: auto;

    -webkit-box-shadow: 0px 0px 4px 2px #999999;

            box-shadow: 0px 0px 4px 2px #999999;
}
.checkboxes_div {
    height: 160px;
	width: 49%;
}
.heading_checkboxes_div {
	font-size: 14px;
	line-height: 14px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	display: block;
	width: 96%;
	padding-bottom: 6px;
	margin-top: 8px;
	margin-right: 2%;
	margin-bottom: 6px;
	margin-left: 2%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}
#newsletter_total_selected_contacts_div {
    font-size: 12px;
	line-height: 12px;
	color: #FF5900;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	float: left;
	margin-top: 0px;
	margin-bottom: 4px;
}
#newsletter_inputfield_select_segments_div {
    background-image: url(../backgrounds/newsletter-segments-summary.jpg);
    background-repeat: no-repeat;
    background-position: center center;
													
    background-size: cover;
	
	text-align: center;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 20px;
	
    text-shadow: 1px 1px 2px #000000, 0px 0px 10px #666666, 0px 0px 2px #999999;
	
	border-radius: 10px 10px 10px 10px;
}
.newsletter_deliveries_div {
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	width: 99%;
	float: left;
	padding-top: 2px;
	padding-bottom: 0px;
}
.newsletter_delivery_data_div {
	width: 99%;
	float: left;
	padding: 10px;
	margin-top: 10px;
	margin-right: 1%;
	margin-bottom: 10px;
	
	border-radius: 10px 10px 10px 10px;
}
.newsletter_delivery_data_segments_div {
	font-size: 12px;
	line-height: 14px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 2px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #666666;
}
#newsletter_segments_summary_div {
	font-size: 12px;
	line-height: 14px;
	color: #FFFFFF;
	margin-top: 10px;
}
.newsletter_system_message {
    background-color: #339966;
}
.newsletter_system_message_alert {
    background-color: #FF5900;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
#newsletters_iframe_div {
    width: 100%;
    float: left;
    padding: 0px;
    margin-top: -24px;
    border: none;
    overflow: hidden;
}
#socket_data {
	width: 100%;
	float: left;
    margin-top: 0px;
}
#error_display {
    color: #FFFFFF;
	background-color: #FF5900;
	text-align: center;
	width: 100%;
	float: left;
}
#newsletters_div, #newsletters_div_empty {
    background-color: rgba(179, 179, 255, 0.3);
	
    display: -webkit-box;
	
    display: -ms-flexbox;
	
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	
    height: 280px;
    width: 29%;
    float: left;
    padding: 10px;
    margin-top: 10px;
    margin-right: 2%;
    margin-bottom: 10px;
    margin-left: 2%; 
    overflow: hidden;

	border-radius: 10px 10px 10px 10px;
}
#newsletters_div_empty {
    background-image: url(../images/logotype_alpha.png);
    background-repeat: no-repeat;
    background-position: center center;
													
    background-size: 80%, 80%;
}
.newsletter_image {
    max-width: 90%;
    max-height: 90%;
    height: auto;
    border: 2px solid #FFFFFF;

    -webkit-box-shadow: 0px 0px 20px rgba(0, 85, 204, 1);

            box-shadow: 0px 0px 20px rgba(0, 85, 204, 1);
	
	border-radius: 6px 6px 6px 6px;
}
#newsletter_monitoring_div {
    font-size: 14px;
	max-height: 130px;
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-botom: 0px;
	padding-left: 0px;
	margin-top: 34px;
	margin-bottom: 20px;
	overflow: auto;
}
#newsletter_image_monitoring {
    float: left;
    border: 1px solid #FFFFFF;
																								 
    -webkit-box-shadow: 0px 0px 20px rgba(0, 85, 204, 1);
																								 
            box-shadow: 0px 0px 20px rgba(0, 85, 204, 1);
	
	border-radius: 6px 6px 6px 6px;
}
#newsletter_monitoring_table {
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    background-image: url(../backgrounds/newsletter-monitoring.jpg);
    background-repeat: no-repeat;
    background-position: center center;
													
    background-size: cover;
					
    width: 100%;
    float: left;
    margin-top: 0px;
    margin-bottom: 20px;
    border: 2px solid #FFFFFF;
	
	text-shadow: 1px 1px 2px #000000, 0px 0px 10px #666666, 0px 0px 2px #999999;

    -webkit-box-shadow: 0px 0px 4px 2px #999999;

            box-shadow: 0px 0px 4px 2px #999999;
}
#newsletter_monitoring_row_left, #newsletter_monitoring_row_right {
    width: 50%;
}
#newsletter_monitoring_row_left {
    text-align: right;
    padding-right: 20px;
}
#newsletter_monitoring_row_right {
    padding-top: 15px;
    padding-bottom: 15px;
}
#newsletter_summary_div {
    font-size: 12px;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 30px;
    float: right;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 0px;
						  
    border-radius: 6px 6px 6px 6px;
	
    -webkit-box-shadow: 0px 0px 3px 1px #FFFFFF;
	
            box-shadow: 0px 0px 3px 1px #FFFFFF;
}
.newsletter_contact_email {
    width: 100%;
    float: left;
    margin-top: 6px;
    margin-right: 20px;
    margin-bottom: 6px;
    margin-left: 20px;
}
.newsletter_deleted_contact_email {
    background-color: #D4D4D4;
    width: 100%;
    float: left;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;   
    margin-top: 6px;
    margin-right: 0px;
    margin-bottom: 6px;
    margin-left: 0px;   
						   
    border-radius: 10px 10px 10px 10px;
}
.newsletter_title_date {
    text-align: center;
    width: 100%;
    float: left;
    margin-top: 24px;
    margin-bottom: 6px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #000000;
}
#newsletter_main_div {
    display: -ms-grid;
    display: grid;
    row-gap: 2rem;
	-webkit-column-gap: 2rem;
	   -moz-column-gap: 2rem;
	        column-gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(46%,1fr));
	
	padding: 10px;
}
.newsletter_html_div_actions {
    height: auto;
    width: 100%;
	margin-top: 4px;
	margin-bottom: 40px;
	border-top-width: 12px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-right-width: 12px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-width: 12px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-left-width: 12px;
	border-left-style: solid;
	border-left-color: #FFFFFF;

    -webkit-box-shadow: 0px 0px 4px 2px #999999;

            box-shadow: 0px 0px 4px 2px #999999;
	
	border-radius: 0px 0px 10px 10px;
}
@supports (display: grid) {
    .newsletter_html_div_actions {
        margin-bottom: 0px; /* Newer browsers will override. */
    }
}
.newsletter_html_div_view {
    height: 450px;
    width: 100%;
    margin-top: 0px;
    margin-right: 0%;
    margin-bottom: 0px;
    margin-left: 0%;
	
    overflow: auto;

	border-radius: 0px 0px 0px 8px;
}
.newsletter_html_div_name {
    font-size: 14px;
    line-height: 14px;
    color: #FFFFFF;
    background-color: #6E6EFF;
    text-align: center;
    min-height: 28px;
    width: 100%;
	padding-top: 7px;
	padding-right: 7px;
	padding-bottom: 7px;
	padding-left: 7px;
    margin-left: 0px;
}
.newsletter_image_container_div {
    background-color: rgba(24, 24, 24, 1);
	background: -o-radial-gradient(circle,rgba(51, 51, 51, 1) 0%, rgba(24, 24, 24, 1) 100%);
	background: radial-gradient(circle,rgba(51, 51, 51, 1) 0%, rgba(24, 24, 24, 1) 100%);
	
    height: 422px;
    width: 100%;
    padding-top: 30px;
}
.newsletter_preview_image_div {
    height: auto;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid #FFFFFF;
    
    -webkit-box-shadow: 0px 0px 20px rgba(0, 85, 204, 1);
    
            box-shadow: 0px 0px 20px rgba(0, 85, 204, 1);
	
	border-radius: 6px 6px 6px 6px;
}
.newsletter_error_message_div {
    display: none;
    color: #CCCCCC;
    max-width: 100%;       /* <-- Set the desired width for the error message. */
    margin-right: 20px;
    margin-left: 20px;
    word-wrap: break-word; /* <-- Allow words to break and wrap. */
}
#newsletter_process_emials_div {
    font-size: 14px;
    line-height: 16px;
    color: #747474;
    width: 100%;
    float: left;
    padding: 20px;
    margin-right: 0%;
    margin-bottom: 40px;
    margin-left: 0%;
    border: 1px solid #666666;
					
    border-radius: 4px 4px 4px 4px;
}
.newsletter_process_email_title {
    line-height: 22px;
    color: #B3B3FF;
    background-color: #000000;
    text-align: center;
    width: auto;
    margin-bottom: 1px;
    
    border-radius: 4px 4px 4px 4px;
}
.processed_element {
    display: block;
    width: 94%;
    margin-right: 3%;
    margin-left: 3%;
}
a.process_button:link, a.process_button:visited {			
    color: #FFFFFF;
    text-decoration: none;
    background-color: #0A0A0A;
	text-align: center;
    float: right;
    padding-top: 4px;
    padding-right: 20px;
    padding-bottom: 4px;
    padding-left: 20px;
    margin-top: 10px;
    border: 1px solid #FFFFFF;
    
    border-radius: 4px 4px 4px 4px;
    
    -webkit-box-shadow: 0px 0px 3px 2px #999999;
    
            box-shadow: 0px 0px 3px 2px #999999;

    -webkit-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease; /* Specifies a transition effect with a slow start, then fast, then end slowly */
    
    -webkit-appearance: none;
    
       -moz-appearance: none;
    
            appearance: none;
}
a.process_button:hover {
    color: #CCCCCC;
    background-color: #333333;
}
a.process_button:active {
    color: #FFFFFF;
    background-color: #FF8C00;
}
a.scroll_to_top:link, a.scroll_to_top:visited {
	text-decoration: none;
	text-align: center;
	background-color: #B3B3FF;
	background-image: url(../images/to-top-arrow-off.png);
	background-repeat: no-repeat;
	background-position: center center;

	background-size: 80%;
	
	display: none;
	height: 40px;
	width: 40px;
	padding: 0px;
	margin: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	position: fixed;
    right: 20px;
	bottom: 10px;
	
	border-radius: 150px 150px 150px 150px;
	
	-webkit-filter: drop-shadow(0px 0px 2px #999999);
	
	        filter: drop-shadow(0px 0px 2px #999999);
}
a.scroll_to_top:hover {
	background-color: #113961;
	background-image: url(../images/to-top-arrow-on.png);
}
a.scroll_to_top:active {
	background-color: #FF8C00;
	background-image: url(../images/to-top-arrow-active.png);
}
a.button:link, a.button:visited, a.button-empty:link, a.button-empty:visited, a.button-empty:active, a.button-empty:hover {
	font-size: 16px;
	text-decoration: none;
	font-variant: small-caps;
	color: #000000;
	background-color: #FFFFFF;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* for horizontal centering */
    text-align: center;

	min-height: 50px;
	padding: 0px;
    margin-bottom: 32px; /* This will be overridden below for newer browsers. */
	border-top-width: 1px;
	border-right-width: 10px;
	border-bottom-width: 1px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #6E6EFF;
	border-right-color: #6E6EFF;
	border-bottom-color: #6E6EFF;
	border-left-color: #6E6EFF;

	-webkit-box-shadow: 0px 0px 4px 2px #999999;

	        box-shadow: 0px 0px 4px 2px #999999;
	
	border-radius: 150px 150px 150px 150px;
}
a.button:hover {
	background-color: #B3B3FF;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	
	-webkit-box-shadow: 0px 0px 4px 2px #9999FF;
	
	        box-shadow: 0px 0px 4px 2px #9999FF;
}
a.button:active {
	color: #FFFFFF;
	background-color: #8080FF;
	border-top-color: #FF8C00;
	border-right-color: #FF8C00;
	border-bottom-color: #FF8C00;
	border-left-color: #FF8C00;
}
a.button-empty:link, a.button-empty:visited, a.button-empty:active, a.button-empty:hover {
	background-image: url(../images/logotype_alpha.png);
	background-repeat: no-repeat;
	background-position: center 5px;
	
	background-size: 30%, auto;
	
    margin-bottom: 32px; /* This will be overridden below for newer browsers. */
	border: 1px solid #AAAAFF;
	cursor: default;

	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

	        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
@supports (display: grid) {
    a.button:link, a.button-empty:link {
        margin-bottom: 0px; /* Newer browsers will override. */
    }
}
a.back_cpanel:link, a.back_cpanel:visited {
	font-size: 12px;
	line-height: 20px;
	color: #FFFFFF !important; /* This is vital to prevent that (in the design function) the styles in the html designs rewrite the links behavior in the function. */
	text-decoration: none;
    text-transform: uppercase;
	background-color: #FF8C00;
	display: block;
	text-align: center;
	height: auto;
	width: 90px;
	padding-left: 4px;
	position: absolute;
	top: 20px;
	left: 20%;
	border: 1px solid #FFFFFF;
	
	-webkit-box-shadow: 0px 0px 4px 1px #A4A4A4;
	
	        box-shadow: 0px 0px 4px 1px #A4A4A4;

	border-radius: 150px 0px 0px 150px;
}
a.back_cpanel:hover {
	background-color: #113961 !important; /* This is vital to prevent that (in the design function) the styles in the html designs rewrite the links behavior in the function. */
}
a.back_cpanel:active {
	background-color: #6E6EFF !important; /* This is vital to prevent that (in the design function) the styles in the html designs rewrite the links behavior in the function. */
}
a.cancel:link, a.cancel:visited {
	font-size: 12px;
	line-height: 23px;
	color: #FFFFFF;
	background-color: #FF0000;
	text-align: center;
	display: block;
	width: 90px;
	margin-top: 12px;
    margin-left: auto;
    margin-right: 0px;
	border: 1px solid #FFFFFF;
	cursor: pointer;
	
	-webkit-box-shadow: 0px 0px 3px 2px #999999;
	
	        box-shadow: 0px 0px 3px 2px #999999;

	border-radius: 4px 4px 4px 4px;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
}
a.cancel:hover {
	color: #CCCCCC;
	background-color: #FF5900;
}
a.cancel:active {
	color: #000000;
	background-color: #EBB000;
}
a.edit:link, a.edit:visited {
    font-size: 18px;
	line-height: 30px;
	color: #6E6EFF;
	background-color: #000000;
	display: block;
	height: 30px;
	width: 30px;
	float: left;
	margin: 1px;
}
a.edit:hover {
	color: #FFFFFF;
}
a.edit:active {
	color: #8C8C8C;
}
a.status_change:link, a.status_change:visited {
    font-size: 18px;
	line-height: 30px;
	color: #6E6EFF;
	background-color: #000000;
	display: block;
	height: 30px;
	width: 30px;
	float: left;
	margin: 1px;
}
a.status_change:hover {
	color: #FFFFFF;
}
a.status_change:active {
	color: #8C8C8C;
}
a.subscribed_change:link, a.subscribed_change:visited {
    font-size: 18px;
	line-height: 30px;
	color: #6E6EFF;
	background-color: #000000;
	display: block;
	height: 30px;
	width: 30px;
	float: left;
	margin: 1px;
}
a.subscribed_change:hover {
	color: #FFFFFF;
}
a.subscribed_change:active {
	color: #8C8C8C;
}
a.valid_change:link, a.valid_change:visited {
    font-size: 18px;
	line-height: 30px;
	color: #6E6EFF;
	background-color: #000000;
	display: block;
	height: 30px;
	width: 30px;
	float: left;
	margin: 1px;
}
a.valid_change:hover {
	color: #FFFFFF;
}
a.valid_change:active {
	color: #8C8C8C;
}
a.delete:link, a.delete:visited {
    font-size: 18px;
	line-height: 30px;
	color: #6E6EFF;
	background-color: #000000;
	display: block;
	height: 30px;
	width: 30px;
	float: left;
	margin: 1px;
}
a.delete:hover {
	color: #FFFFFF;
}
a.delete:active {
	color: #8C8C8C;
}
a.index:link, a.index:visited {
	font-size: 14px;
	line-height: 16px;
	color: #5C5C5C;
	background-color: #D4D4D4;
	display: block;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 1px;
}
a.index:hover {
	color: #000000;
	background-color: #BABABA;
}
a.index:active {
	color: #FFFFFF;
	background-color: #A1A1A1;
}
a.download_file:link, a.download_file:visited {
    font-size: 20px;
	line-height: 20px;
	color: #041E42;
}
a.download_file:hover {
	color: #527A8A;
}
a.download_file:active {
	color: #FF5900;
}
a.stop_delivery:link, a.stop_delivery:visited {
    font-size: 12px;
	line-height: 22px;
	color: #FFFFFF;
	background-color: #FF0000;
	height: 22px;
	width: 110px;
	padding-top: 4px;
	padding-right: 16px;
	padding-bottom: 4px;
	padding-left: 16px;	
	border: 1px solid #FFFFFF;
	cursor: pointer;
	
	-webkit-box-shadow: 0px 0px 3px 2px #999999;
	
	        box-shadow: 0px 0px 3px 2px #999999;

	border-radius: 4px 4px 4px 4px;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
}
a.stop_delivery:hover {
	background-color: #041E42;
}
a.stop_delivery:active {
	background-color: #FFBF00;
}
a.download_excel:link, a.download_excel:visited {
    color: #6E6EFF;
}
a.download_excel:hover {
    color: #FFFFFF;    
}
a.download_excel:active {
    color: #8C8C8C;  
}
a.view_newsletter:link, a.view_newsletter:visited {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;            /* vertically centers items. */
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; /* optional: spreads text and icon apart. */
	
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
    background-color: #000000;
    width: 100%;
	padding-top: 2px;
    padding-right: 2px;
	padding-bottom: 2px;
    padding-left: 6px;
    margin-top: 4px;
            
    border-radius: 150px 150px 150px 150px;
}
a.view_newsletter:hover {
    color: #FFFFFF;
    background-color: #6E6EFF;
}
a.view_newsletter:active {
    color: #FFFFFF;
    background-color: #FF8C00;
}
/* ::::::::::::::::::::::::::: PANEL FUNCTIONS ::::::::::::::::::::::::::: */