/* This file defines all of the basic formatting for the TALK library portal website. Modifications are made in other files 
   (styles-x.css) to re-format based on screen size (so the website is responsive). */

/* Header */
.talk {margin: 0; background-color: #337C99; font-family: Verdana, Arial, Helvetica, sans-serif; color: #ffffff}
.talk .page-wrap {width:1240px; padding: 0 30px; position: relative; margin: 0 auto}
.talk header {width:100%; height: 190px; background-color: #014576}
/* hover effect for logo */
.talk header .talk-logo {width: 265px; height: auto; float: left; margin-top: 30px; transition: 1s transform}
.talk header .talk-logo:hover {transform: scale(1.1)}
/* define how links look when logged in and out */
.talk header .logged-out,
.talk header .logged-in {float:right; margin-top: 70px; text-align: right}
.talk header .logged-out li,
.talk header .logged-in li {font-size:12px; display: inline; list-style: none}
.talk header .logged-out a,
.talk header .logged-in a {color: #ffffff; text-decoration: none}
.talk header .logged-out a:hover,
.talk header .logged-in a:hover {text-decoration: underline}
.talk header .logged-in .pipe {margin: 0 5px}


/* Footer */
.talk footer {clear: both; background-color: #014576; font-size:11px; padding: 25px 0 40px 0}
.talk footer span {display: block; float: left}
.talk footer ul {float: right; margin: 0; text-align: right}
.talk footer li {list-style: none; display: inline;}
.talk footer a {color: #ffffff; text-decoration: none; font-size: 14px}
/* define hover effect for links */
.talk footer a:hover {text-decoration: underline;}

/* Login Page and other forms */
/* 'position: relative; margin: 0 auto;' on login page centers form in the middle of the page */
.talk .login-page main {width:450px; min-height: 370px; position: relative; margin: 0 auto; padding: 100px 0; height: calc(100vh - 456px);}
.talk form {position: relative}
.talk form input,
.talk form select,
.talk form textarea {width:100%; height:55px; padding: 5px 10px; color:rgba(0,0,0,.75); box-sizing: border-box; border: 1px solid rgba(0,0,0,.75); margin-bottom: 25px}
.talk form textarea {height: 120px; padding: 14px;}
.talk form .no-margin textarea {margin: 0}
/* format for character count elements in form */
.talk form .character-count {font-size:12px; text-align:right; margin-bottom: 30px; display: block; width: 100%}
.talk form input.no-margin {margin-bottom: 5px}
.talk form label {font-size: 18px; margin-bottom: 5px; display: block}
/* format for forgot password link on login form */
.talk .forgot-password-link {color: #ffffff; float: right; text-decoration: none}
.talk .forgot-password-link:hover {text-decoration: underline}
/* format for fields that are required on form */
.talk .required-fields {font-size: 12px; position: absolute; right:0; top:6px}
/* button formatting */
.talk .btn {font-size: 20px; color:#ffffff; padding:10px 20px; border: 3px #ffffff solid; border-radius: 10px; transition:1s background-color; cursor: pointer; float: right; margin-left: 10px}
.talk .btn a {color: #ffffff; text-decoration: none}
.talk .btn.orange {background-color: #E65C22}
.talk .btn.orange.import,
.talk .btn.orange.submit {float:left; margin: 20px 20px 0 0}
.talk .btn.orange.download {position: absolute; right: 30px;}
/* Style for download buttons when 2 appear on the page */
.talk .btn.orange.download.top {position: absolute; top: 50px;}
/* Continue formatting for forms */
.talk .btn.blue {background-color: #014576}
.talk .btn.blue.submit {float:left; margin: 20px 20px 0 0}
.talk .btn.orange:hover {background-color: #014576;}
.talk .btn.blue:hover {background-color: #E65C22}
/* format for login button on login page (different from submit button used throughout portal) */
.talk .login .btn.orange {float: right; clear: both; margin-top: 30px}
.talk option {padding: 8px 0; height: 30px}
/* Style for recipient group and recipient zip codes selection boxes on schedule event text forms */
.talk .half {width: 50%}
.talk .half.recips {float: left;}
.talk .half.recips select{height: 100px; width: 95%}
.talk .half.recips label{width: 95%}
.talk .recipients {margin-bottom: 5px}
/* Continue formatting for forms - dividing page into thirds */
.talk .third {width: 33.333333%; float:left}
.talk .third input, 
.talk .third select {width: 96%;}
.talk .third.end select {width: 100%;}
/* Class for dividing page into fourths */
.talk .fourth {width: 25%; float:left}
.talk .fourth input, 
.talk .fourth select {width: 96%;}
.talk .fourth.end select {width: 100%;}
/* Continue formatting for forms */
.talk .filename {float: left; margin-top: 34px;}
/* define top bar for some pages (slightly different for View Past Messages page, so new class) */
.talk .top-bar {margin-bottom: 30px}
.talk .top-bar .form-group {clear: both; float: left}
.talk .top-bar select {width: 280px}
.talk .top-bar label {float: left; margin: 16px 10px 0 0;}
.talk .top-bar button {float:right; margin-top:2px}
.talk .clear {clear: both}
.talk .top-bar.past .form-group {float: right}
/* Format radio buttons and checkboxes on forms (e.g. Add/Delete Users page) */
.talk input[type='radio'] {width:20px; height:20px; float: left; margin: 1px 8px 22px 0;}
.talk input[type='checkbox'] {width:20px; height:20px; float: right; margin: 1px 8px 22px 0;}

/* Splash Page */
.talk .bucket-wrapper {display: flex; justify-content: space-between;}
.talk .bucket {width:23%; height: 125px; position: relative; background-color: #ffffff; color:#014576; font-family:'Teko', sans-serif; font-size: 24px; text-align: center; padding:20px; border-radius: 30px; margin-bottom: 30px; text-decoration: none; transition: .5s background-color, .5s transform; line-height: 22px; box-sizing: border-box}
/* hover effect - make button slightly bigger and different color on hover */
.talk .bucket:hover {background-color: #E65C22; color:#ffffff; transform:scale(1.05); border: 2px solid #ffffff} 
.talk .bucket:hover img {filter: grayscale(100%) brightness(1000%)}
/* define buckets for splash page - nth-child tag used to control sizing of the images on the buttons */
.talk .bucket:nth-child(1) img {width: 50px; height: auto; margin-top: 6px}
.talk .bucket:nth-child(2) img {width: 50px; height: auto}
.talk .bucket:nth-child(3) img {width: 55px; height: auto}
.talk .bucket:nth-child(4) img {width: 55px; height: auto; margin-top: 8px}
.talk .bucket.second-row:nth-child(1) img {width: 75px; height: auto; margin-top: 8px}
.talk .bucket.second-row:nth-child(2) img {width: 60px; height: auto; margin-top: 6px}
.talk .bucket.second-row:nth-child(3) img {width: 90px; height: auto; margin-top: 8px}
.talk .bucket.second-row:nth-child(4) img {width: 60px; height: auto}
.talk .bucket span {position: absolute; bottom:20px; left: 0; right: 0;}

/* Messages */
.talk .message {padding-bottom: 30px 0}
.talk .message,
.talk .message-titles {clear: both; line-height: 30px;} 
.talk .message-titles {font-weight: bold}
.talk .message p {margin: 0 !important}
/* define columns for messages pages */
.talk .sent-by-col,
.talk .date-time-col,
.talk .message-col,
.talk .buttons-col {float: left}
.talk .sent-by-col {width: 140px; margin-right: 30px}
.talk .date-time-col {width: 120px; margin-right: 30px}
.talk .message-col {width: calc(100% - 570px)}
.talk .buttons-col {width: 250px}
.talk .buttons-col .btn {float: right; margin:8px 0 0 12px}
.talk .reply-message-col {width: calc(100% - 320px); clear: both; float: right; margin-top: 20px; line-height: 20px}
.talk .reply-message-col textarea {margin: 0}
.talk .message-col.past-message {width: calc(100% - 320px)}
.talk .reply-message-col.past-reply {padding-left:50px; margin-left:50px; border-left:1px dotted #ffffff; width: calc(100% - 372px);}

/* Reports */
.talk .reports-col {clear: both;}
.talk .reports-col .col1 {width:130px; float:left}
.talk .reports-col .col2 {width:calc(100% - 130px); float:left}
.talk .reports-col .report-labels {font-weight: bold; margin-bottom: 10px; display: block}
.talk .reports-col ul {margin: 0 0 50px 0; padding: 0}
.talk .reports-col ul li {display: block; margin-bottom: 5px}

/* Basic 2 column layout */
.talk .left-col {width: calc(50% - 50px); margin-right: 50px; float: left}
.talk .right-col {width: calc(50% - 50px); margin-left: 50px; float: left}
.talk .back {font-size: 12px; color: #ffffff; text-decoration: none; position: absolute; top:-62px; right:30px}
.talk .back:hover {text-decoration: underline}
.talk .back.all {right:180px}
.talk .top-bar {width:640px; float: right}

/* Misc */
.talk .basic-layout main {padding: 90px 0}
.talk .basic-layout main h1 {position:relative; top:-19px}
.talk .basic-layout main p {line-height: 25px; margin-bottom: 20px}
.talk main h1 img {width: 55px; height: auto; position: relative; top:8px; margin-left: 10px;}
.talk main h1,
.talk main h2,
.talk main h3,
.talk main h4,
.talk main h5,
.talk main h6 {font-family:'Teko', sans-serif; margin: 0}
.talk main h1 {font-size:40px; margin-bottom: 20px; line-height: 32px}
.talk main h2 {font-size:36px; margin-bottom: 38px; line-height: 32px}
.talk main h3 {font-size:32px}
.talk main h4 {font-size:28px}
.talk main h5 {font-size:20px}
.talk main h6 {font-size:16px}
.talk main h1 img.event-icon {top:16px}
.talk main h1 img.add-icon {top:3px; width: 94px;}
.talk main h1 img.add-user-icon {top: 9px; width: 80px;}
.talk main h1 img.reports-icon {top: 14px;}
.talk .clearfix::after {content: ""; clear: both; display: table;}
/* hr tag = line dividers (e.g. View All Messages page - lines between the messages) */
.talk hr {clear: both; height:1px; border: none; border-bottom:1px dotted #ffffff; margin: 35px 0 28px 0}
/* Class for formatting instructional text to user on schedule event texts page */
.talk .help {font-size: smaller; font-style: italic}

/* View subscribers*/
.talk .subs {padding-bottom: 30px 0}
.talk .subs,
.talk .subs-titles {clear: both; line-height: 30px;} 
.talk .subs-titles {font-weight: bold}
.talk .subs p {margin: 0 !important}
.talk .phone,
.talk .zip,
.talk .bdate1,
.talk .bdate2,
.talk .lang,
.talk .regdate {float: left; margin-right: 10px}
.talk .phone,
.talk .regdate,
.talk .bdate1,
.talk .bdate2 {width: 160px;}
.talk .zip,
.talk .lang {width: 90px;}
.talk .buttons {float: left; width: 250px;}
.talk .buttons .btn {float: right; margin:8px 0 0 12px}
#subs {margin-bottom: 30px}

/* Rewrite of top-bar for view all msgs page */
.talk .top-bar2 {margin-bottom:30px;}
.talk .top-bar2 #msgsort,#filterpastmsgs{width: 300px;}
.talk .top-bar2 #filterpastmsgsdiv{float: right;}

/* Class for view event text list */
.event-txt-list {padding-bottom: 25px;}
.event-txt-list span{ display: inline-block; width: 150px; padding-right: 5px; vertical-align: top}
.event-txt-list span.msg{ display: inline-block; width: 250px; padding-right: 5px; vertical-align: top}
.event-txt-list .event-headers { display: block; width: 100%; margin-bottom: 10px; font-weight: bold; line-height: 30px}
.event-txt-list .event-txt {display: block; width: 100%; margin-bottom: 10px;}
.event-txt-list .btn-col {width: 250px}
.event-txt-list .btn-col .btn {float: right; margin:8px 0 0 12px}


/* Classes to style select2 searchable select boxes */
.select2-dropdown {color: black; font-family: 'Verdana, Arial, Helvetica', sans-serif;}
/*.select2-selection__rendered {
line-height: 55px !important;
font-family: 'Verdana, Arial, Helvetica', sans-serif;
}

.select2-selection {
height: 55px !important;
font-family: 'Verdana, Arial, Helvetica', sans-serif;
}*/
.sel2 { height: 55px !important; font-family: 'Verdana, Arial, Helvetica', sans-serif; margin-bottom: 10px}
.multsel { color: black; font-family: 'Verdana, Arial, Helvetica', sans-serif; margin-bottom: 10px}
#zipselbx{margin-bottom: 25px}
#sellib{margin-bottom: 25px}

#purchblock {float: left}
#invhist {float: left}

#lblsubpurch {color: #ffffff; margin-top: 25px}
#lblesubpurch {color: #ffffff; margin-top: 25px}
#lbltxtamt {color: #ffffff; margin-top: 25px}
/*Classes to style the entity/lib toggle*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}